Menu
Assuming I have a select like this:
<select size="4">
<option id="1">Please wait ...</option>
<option id="2">Please wait ...</option>
<option id="3">Please wait ...</option>
<option id="4">Please wait ...</option>
<option id="5">Please wait ...</option>
</select>
I should see a List of 4 elements having a scrollbar on the right.
What i like to do now is to load the text via ajax if the option becomes visible somehow (scrolling and/or initial).
At the end, I do not load them lazy because of the huge metadata transfer. This is the request I must upload (send to the server):
This is inacceptable for the lazy-load of single elements.
993
You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.
Lazy loading is a technique for waiting to load certain parts of a webpage — especially images — until they are needed. Instead of loading everything all at once, known as "eager" loading, the browser does not request certain resources until the user interacts in such a way that the resources are needed.
Lazy-loading images and video reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.
I'm sorry for my bad English, but as I'm understanding this question I can present this solution:
$(document).ready(function(){
$('select').on('scroll', function(){
var sel = $(this);
var lasto = sel.find('option:last');
var s = sel.position().top + sel.height();
var o = lasto.height() + lasto.position().top - 4;
setTimeout(function(){
if(o < s){console.log('We need AJAX!');}
}, 2200);
});
});
Link
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
