CODEWITHSUNDEEP
jquerywebkitlazy-loading
user1380540
user1380540

Reputation: 744

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!

Upvotes: 9

Views: 31942

Answers (9)

Victor Z
Victor Z

Reputation: 76

I had the same issue.

Solved that way:

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

;-)

Upvotes: 0

Amos Crist
Amos Crist

Reputation: 1

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.

Upvotes: 0

Philip
Philip

Reputation: 7166

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

Set inside load instead.

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

Upvotes: 1

theisof
theisof

Reputation: 711

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

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

Upvotes: 3

Konstantin Lekh
Konstantin Lekh

Reputation: 71

Try this:

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

Upvotes: 3

Cullen SUN
Cullen SUN

Reputation: 3547

 $(window).resize();

Helped me in my case.

Upvotes: 6

Mika Tuupola
Mika Tuupola

Reputation: 20377

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.

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

Upvotes: 16

user1380540
user1380540

Reputation: 744

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

Upvotes: 4

Martin Lyne
Martin Lyne

Reputation: 3065

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

Upvotes: 0

Related Questions