New Perspectives On Web Design

CHAPTER 7 Designing Adaptive Interfaces

// lazy-load images

window.watchResize(function(){

var

threshold = 400,

image = document.createElement('img'),

paragraphs = document.getElementsByTagName('p'),

i = paragraphs.length,

p, loaded, src, img;

if ( browser_width >= threshold )

{

image.setAttribute('alt',");

while ( i-- )

{

p = paragraphs[i];

src = p.getAttribute('data-image-src');

// check to see if the image is already loaded

loaded = p.getAttribute('data-image-loaded');

// Do we have a path?

// Is the image already loaded?

if ( src != null &&

loaded == null )

{

img = image.cloneNode(true);

img.setAttribute('src',src);

p.appendChild( img );

p.setAttribute('data-image-loaded',");

}

}

image = paragraphs = p = img = null;

}

});

The main differences between this version and the previous one are:

1. The function is now being passed into watchResize as a callback.


2. We are no longer assessing browser_width within the scope of the func-
   tion.


3. We are checking the data-image-loaded attribute to see if an image has
   already been loaded for the given paragraph so we don’t double-load
   images if a user continually reorients the screen.