I am trying to optimize my site for lazy loading. The user will enter my site, using a media query and jQuery the size of the user's screen is detected, if the user's screen is < 420px then the mobile images will be loaded, if not the large images will be loaded. I have already made this possible:
HTML
<img src='/loading-img.jpg' data-large-src='/media/large-img' data-mobile-src='/media/mobile-img'>
jQuery
$(document).ready(function() {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(function(){
checkSize();
});
});
//Function to the css rule
function checkSize(){
if ($("#check_screen").css("display") == "none" ){
$('img').each(function() {
$(this).attr('src', $(this).attr('data-mobile-src'));
});
}
else{
$('img').each(function() {
$(this).attr('src', $(this).attr('data-large-src'));
});
}
}
After detecting which images to display, I do not want them all to load. Instead, I want only the images that are displayed and 200px under the viewport to load. How do I accomplish this?