LazyLoad images not appearing until after a scroll

问题

I'm using the lazyload plugin for jQuery.

It's working fine, except one issue: The images src is not being swapped out for the data-original until you scroll. Once you scroll, even a tad, the images load - but I need them to load right when the page is ready.

A note: This is purely a Chrome/Safari Issue. I am not having this issue in Firefox or Opera, or even IE9.

I've tried following the suggestion of this post: http://sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/ Which states that the basic jQuery library has the capabilities of lazy loading without a plugin needed. This seemed not to be so, as the images just all loaded on initial page load.

Any insights are greatly appreciated!

回答1:

Your images most likely do not have width and height set. Webkit browsers will see images on document.ready with zero width and height. This means jQuery will consider the images invisible. Lazy Load ignores invisible images by default. You have three options.

Fix HTML to have width and height attributes on images.
Set skip_invisible to false.
Use atleast version 1.8.3 of the plugin.

回答2:

 $(window).resize();

Helped me in my case.

回答3:

Solved my own problem: You HAVE to set a height and a width on the image!

回答4:

Try this:

$('img.lazy').lazyload();
$(window).scroll();

回答5:

I had a similar issue. The threshold option solved it for me:

$("img.lazy").lazyload({
    threshold : 400
});

回答6:

For me the problem was that I called $('img.lazy').lazyload() in ready

Set inside load instead.

$(window).load(function(){
  $('img.lazy').lazyload()
});

回答7:

You could mimic/trigger a scroll event to trigger the effect on pageload: http://api.jquery.com/scroll/

回答8:

I used lazy loading jquery plugin but the loading is making an issue. (ie.) it is smoother in crome browser. But unfortunately it is not working properly in mozilla fire fox. i'm getting this notification from mozilla fire fox (A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.). So just reply any better idea to avoid this bug.

回答9:

I had the same issue.

Solved that way:

Just replace the "lazy" class from the first images on the page.

;-)

来源：https://stackoverflow.com/questions/13535597/lazyload-images-not-appearing-until-after-a-scroll

标签

jquery

webkit

lazy-loading