Load browser images with javascript event?

Question

I've got a page containing a lot of images, which are initially hidden from view as I'm using tabbed divs (ie. hiding some divs using CSS display:none).

Therefore, when then page loads, it takes ages to load all of the images, which looks like the page is slow (as the loading bar on the browser doesn't complete for 10+ seconds).

I would like a way of not loading images until they are visible on the page.

I've played around with jQuery LazyLoad, however this only seems to load images when scrolling the browser (which doesn't work for tabbed divs).

Therefore, is there a way of changing LazyLoad to work like this, or is there a better way of doing this?

Thanks!

Answer 1

Maybe jQuery Tabs could do what you need, with ajax call on tabs...

How do you display your hidden divs?

Answer 2

One plan of attack:

Instead of putting the image URL in the src attribute of the img tag, put it somewhere else (e.g. a hidden span with a particular class above it) and when showing the div, iterate through all the img tags and set the src to the URL it should have had.

As a method it's definitely got some downsides.

Answer 3

I have tried that lately and have to say that this is not possible with js anymore. Maybe it has never been... Projects like lazyload have always proclaimed that they would stop all images from loading on startup, but you can see in firebug that this does not work. The images are even loaded twice, on domready and when you start scrolling...

Your only choices would be ajax on the on hand or doing something like this:

<img src="transparent.gif" alt="" rel="real image source" />

and then switch attributes when the divs become visible, so the image starts loading.

This works fine as well at least if you don't need google indexing them.

Hope that helps! :)

Edit: Hm, why did I get a -1 when I was just givin an answer? Just have a look at pages with lazyload and enable firebug and then scroll the page. It was even said here on stackoverflow and in the comments for the lazyload plugin that this is the only solution at the moment ... :(

Answer 4

If you're using (or can use) the HTML5 doctype, you can use the "data-" prefix for tag attributes:

<img src="" data-src="/path/to/image" style="display: none" />

And then you can use Javascript to fill the src with the data-src:

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

Answer 5

If your only goal is to 'hide' the progress bar which is taking so long due to the large number of images, I'd go for some kind of AJAX solution, since that way the progress bar is not 'used'. It does introduce more complexity in the way you want to load your HTML elements (and possibly when).

I personally don't like using HTML attributes for anything other than their original purpose, so storing the path in another attribute and switching when needed would not be my first option. Instead, I'd try to create a JavaScript array (id => path) and update the separate HTML IMG elements when needed.

Good luck! ;)