在页面加载时运行jquery延迟加载不滚动

Question

I am trying to use the jQuery lazy load plugin with the jQuery Isotope plugin . Things seem to be playing together nicely, however, I am having a tough time figuring out how modify the lazy load plug in to my needs.

The plug in defaults to handling the scroll event to trigger lazy loading. There is also hover and click. I would like the plugin to fire on page load. Say, 2000ms after $(window).load() has completed.

I see I can create my own event functions per the documentation like so:

$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
}); 

However, due to my ignorance, I cannot see how I would work with this snippet to create my own page load event.

I would like the initial images to lazy load after $(window).load() , then when I apply isotope filtering events, the new items to be lazy loaded as they populate the DOM.

Any help is much appreciated.

Answer 1

I have made a lazy load plugin that might help. Once initialized you can just call $.fn.lazyloadanything('load') and it will auto load without having to scroll first. No need to customize. Check it out:

https://github.com/shrimpwagon/jquery-lazyloadanything