Loading Images on-demand (or; disable loading of hidden images)

Question

I have a slider-like widget which is basically, a div of sub-divs containing some page content (together with images).

Initially, all sub-divs are hidden except the main one.

My problem is that all web browser seem to load (request) all images in the content, whether they're hidden or not.

In my case specifically, it will end up loading some 350 images at one go. This is a lot, especially when considering images are at the very least 200kb. In fact, the network log specifies that the total website size is in the range of 6mb to 7mb.

All these images hinder page load, especially because they are expected to load before other page elements (eg; buttons etc).

What is the solution to my problem? Things I tried already:

loading each sub-div as ajax. This is not possible, the page content must be there at all time.
hiding the images themselves (in the hope that the web browser does not load them). This failed, the browser still loaded images with CSS display:none;.
Possible solution: intentionally break the markup (server-side) so that the browser does not load the images, eg; writing <img alt="abc.jpg" src="about:blank"/>, then when tab switches, I would fix the markup correctly with jQuery. I haven't tried this yet, is it advisable?

I also use the possible solution but instead of using alt attribute I use data-src attribute, this way you can still use the alt attribute. Works very well, but ofcourse if someone has disabled javascript it will fail the page. — jeffreydev
– jeffreydev, Commented Nov 1, 2011 at 8:23
@jeffreydev They wouldn't be able to see the page anyway. Does data-src work with older browsers? — Christian
– Christian, Commented Nov 1, 2011 at 8:41
ive tested it in IE6 and above, firefox, google chrome and safari — jeffreydev
– jeffreydev, Commented Nov 1, 2011 at 14:33

Christian · Accepted Answer · 2011-11-01 15:38:54Z

Well, as I hinted in the question, a possible solution can be achieved by the following trick:

<?php // server-side content echo str_replace(' src=', ' data-dly="" src="blank.gif" data-src="', $html); ?> // client-side script function showPage(id){ hidePages(); var page = jQuery('#page'+id); page.find('img[data-dly="1"]').each(function(){ jQuery(this).attr('src',jQuery(this).attr('data-src')); }).removeAttr('data-dly').removeAttr('data-src'); page.fadeIn(); }

NB: Thanks to @jeffreydev for the help as well.

Collectives™ on Stack Overflow

Loading Images on-demand (or; disable loading of hidden images)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related