loadDesktopImages.js

loadDesktopImages.js

// loadDesktopImages is looking for spans with a data-img-src attribute, whose parent is visible
// Any parent visible with CSS will trigger the replacement of the span with an image tag
// We use gridset m-hide on images we want to hide from small devices
// <noscript> is there as a backup

/*
<div class="m-hide">
	<span title="" class="media__image" data-img-src="http://fillmurray.com/200/300" style=""></span>
	<noscript><img title="" alt="" class="media__image" src="http://fillmurray.com/200/300" style=""></noscript>
</div>
*/


/*=====================================
  Conditionally load images for desktop view
*/
var loadDesktopImages = function() {

	$('[data-img-src]').each(function() {

		if (!$(this).parent().is(':visible')) return;

		var $this = $(this),
			$imgClass = $this.attr('class'),
			$imgStyle = $this.attr('style'),
			$imgTitle = $this.attr('title'),
			$imgSrc = $this.data('img-src'),

		// Create image element
		$img = $('<img />')
			.addClass($imgClass)
			.removeClass('media__image__placeholder')
			.attr('style', $imgStyle)
			.attr('title', $imgTitle)
			 .attr('alt', $imgTitle)
			 .attr('src', $imgSrc)
		
		// Add class to parent so we can apply CSS
		$this.parent().addClass('has-media');
		
		// Inject img into DOM in place of span
		$this.replaceWith($img);
	
	});

};



// add resize handler to capture rotation/resize changes
// requires http://code.google.com/p/jquery-debounce/
$(window).resize($.debounce(loadDesktopImages, 1000));