New Perspectives On Web Design

By Aaron Gustafson CHAPTER 7

paragraphs = document.getElementsByTagName('p'),
// count the paragraphs
i = paragraphs.length,
// instantiate loop vars
p, src, img;

// are we over the threshold
if ( browser_width >= threshold )
{
// make sure we have an empty alt for accessibility
image.setAttribute('alt',");

// reverse looping through the paragraphs is faster
while ( i-- )
{
// reference the paragraph
p = paragraphs[i];
// collect the image path
src = p.getAttribute('data-image-src');
// do we have a path?
if ( src != null )
{
// clone the prototype image
img = image.cloneNode(true);
// set the source
img.setAttribute('src',src);
// append it to the paragraph
p.appendChild( img );
// flag the paragraph as having an image
p.setAttribute('data-image-loaded',");
}
}

// release DOM references
image = paragraphs = p = img = null;
}
}());

That takes care of the initial load of the page. On a narrow screen (<400px)
the thumbnails won’t be loaded, but on a wider screen they will be dynam-
ically requested and added to the page.