Images loading instanstly

[juergengenser]

I'm trying to implement unveil in a Wordpress-based site. It should target only a specific range of images - however, the images seem to load instantly, not when they are coming into the viewport.

What could be the problem here?

Thanks,
Jürgen

[TheEskhaton]

Did the console ouput any errors, what version of jQuery was included and in what browser did this happen in

[juergengenser]

No console errors, jQuery version is 1.9.1 - I've tried Chrome, Safari and Firefox on Mac so far... I could share the link with you if this would be helpful?

[TheEskhaton]

Of course, send a link and I'll look into it.

[andreasbecker]

Same here. I'm trying to load PNGs. Can that be the cause?

[joeldbirch]

Just checking: @juergengenser & @andreasbecker, are you altering the img tags that WordPress outputs, somehow, so that the image's URL is stored in data-src rather than src? If not, the images will load straight away, of course.

[andreasbecker]

Problem was that width and height attributes were not set on the image tag. With them set it's working perfectly.

[joeldbirch]

Ah, that is interesting. Often, people omit width and height attributes for responsive designs, but clearly they need to remain if this plugin is to work. Thanks for the info.

[joeldbirch]

…although, relying on height attributes will result in imprecise calculations if the image is forced to scale with a responsive design, of course.

[foodini]

I've seen the same everything-loads-at-page-load problem using both lazyload and unveil, even with the image width and height set. I'm just fiddling with it on a throw-away page with 1x1 black images: http://foodini.org/fingerme.cgi

[luis-almeida]

width and height attributes have anything to do with the way this plugin works. The demo page is a proof of that.
I'm closing this issue as it doesn't seem related to unveil itself but with the attempt of using in WP which I'm not familiar with.