Plugin Contributor
aibrean
(@aibrean)
Yes, in your functions do this:
wp_dequeue_script('lazyload-call')
Then add this script to your template and adjust the threshold:
jQuery(function ($) {
$("img.lazy").show().lazyload({
threshold : 200, // control when it shows up.
effect: "fadeIn"
});
});
Refer to http://www.appelsiini.net/projects/lazyload as Trigger Loading might be something better suited for you.
Plugin Contributor
aibrean
(@aibrean)
Remember though, it still has to actually “load” the image and will use the placeholder until the image is rendered. Larger images may take longer times to load. I would recommend you use caching.
I tried the above, still the same issue no matter what the threshold. The images are small (95% are under 20kb), so they take no time to load. No product images show unless I scroll at least 1px.
Here’s what I did:
add_action( 'wp_print_scripts', 'lazyload_dequeue' );
function lazyload_dequeue(){
wp_dequeue_script('lazyload-call');
}
add_action( 'wp_footer', 'lazyload_recall');
function lazyload_recall(){
echo "<script>jQuery(function ($) {
$('img.lazy').show().lazyload({
threshold : 200, // control when it shows up.
effect: 'fadeIn'
});
});</script>";
}
So I found a hacky workaround to scroll the page 1px on load: I added the following before $img.lazy…
$(window).scrollTop($(window).scrollTop()+1);
perhaps not the best way around, but it gets the job done.
