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.

sixFingers · Accepted Answer · 2013-05-13 12:35:52Z

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");

answered May 13, 2013 at 12:35

sixFingers

1,2958 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karussell · Accepted Answer · 2015-01-28 19:24:46Z

0

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")) {

answered Jan 28, 2015 at 19:24

Karussell

17.4k17 gold badges101 silver badges205 bronze badges

Collectives™ on Stack Overflow

jquery lazy loading plugin

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related