Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.