jquery lazy loading plugin

Question

I am creating a portal using large number of images. For smoothness I add lazy loading plugin to this portal

This is the plugin http://www.appelsiini.net/projects/lazyload

I used this code for initializing the plugin:

$(function () {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});

Image url is like this:

<a href="#">
    <img src="/public/images/dflt_03.jpg" data-original="<?php echo $this->magImg;?><?php echo $top['img_path'];?>" width="180" height="230" alt="cover" class="lazy">
</a>

This worked perfectly. But my problem is that after loading the page there is no image for displaying. after mouse scroll takes place this will show images. I want to show some images before it will be scrolled.

Answer 1

There is no markup provided of your html page, but since the concept of lazy loading is that images get loaded only when needed , that is when they appear in the viewport, probably triggering a scroll or resize event on window or body should work. Try any of these after page load (or, better, when lazy loading complete callback gets called):

$("html, body").trigger("scroll");
$(window).trigger("resize");

Answer 2

See the fix proposal here

I checked the plugin and changed this line in the update method:

if (settings.skip_invisible && $this.css('display') === 'none') {
//if (settings.skip_invisible && !$this.is(":visible")) {