Search code examples
javascriptjqueryhtmlcssimage-loading

Load browser images with javascript event?

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!

Solution

  • I was unaware of this previously, but LazyLoad does support triggering from events:

    http://www.appelsiini.net/projects/lazyload

    If anyone needs a hand on how I did this, let me know!