Prevent Image load till visible?

[noahgelman]

I’m using the jQueryUI Tabs to show a small gallery of images. I’m a bit worried about load time. Is there a way to prevent the non-visible images from loading till the user selects the tab to make them visible?

[noahgelman]

hmm… no ideas on this one?

[jamygolden]

Try setting their display to none with css and use jQuery to make them display: block when the tab is clicked.

[noahgelman]

If they’re displayed:none, would the browser still load them on page load?

[jamygolden]

I remember images not being loaded until I set the display to ‘block’ – Which was a problem at the time lol.

[TheDoc]

There is a really cool way of doing this that I’ve seen lately, but I don’t know what it’s called!

Ah ha! – Lazyload http://www.appelsiini.net/projects/lazyload

[noahgelman]

I came across lazyload, but the disclaimer at the top worries me.

“Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!”

And that was written in September of 2007. That sounds like something to be concerned about. Plus it says it doesn’t work in safari and looking at the comments, there are some Firefox 3.6 issues

[TheDoc]

As far as I can see, it works on modern browsers (as I visit quite a few sites that use it). The disclaimer at the top didn’t make any sense to me.

[noahgelman]

I have another question maybe you can clarify the meaning of

“Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.”

Does this only work with images further down the page, or also with images inside hidden divs?

[TheDoc]

I’m actually unsure, to be honest with you. You’d have to test that out.

[noahgelman]

K, well I’m going to wait to mark this as Solved to see if anyone else has any ideas for any other options.

[jamygolden]

Have you given the display: none approach a try?

[noahgelman]

I havent on the images themselves, but the div they’re in. Does setting the image to display none increase loading speed?

[jamygolden]

Do they have to be <img> elements? I did a test and if an element is set to display none, the background image isn’t loaded.

[noahgelman]

Yeah, they’re elements, background images aren’t an option

[Author]

Posts