Adaptive (“image ID + text string”) JavaScript for Responsive Images

问题

I've been using the following code for my responsive image replacements:

//HTML:

<img id="testimage" onLoad="minWidth32('test_image')" src="testimage_small.jpg">


//JavaScript:

var screencheck = window.matchMedia("(min-width: 32em)");
function minWidth32(imageName) {
   if (screencheck.matches) {
      currentImage = document.images[imageName];
      currentImage.src = imageName + "_large.jpg";
   }
}

(edit)New streamlined version of JavaScript:

var screencheck = window.matchMedia("(min-width: 32em)");
function minWidth32(imageID) {
   if (screencheck.matches) {
      document.getElementById(imageID).src = imageID + "_large.jpg";
   }
}

I really love the "image ID + text string" method for image changes. It allows a single script (per media query) to run as many images as necessary. Many responsive image scripts/plug-ins/libraries involve so. much. mark-up.

But this particular script only sort-of works:

1.) Originally designed for "onMouseOver" rollover effects, this script requires an event listener. This isn't ideal for a responsive images script since browsers are resized and mobile devices change orientation long after an "onLoad" event is over.

2.) This script can only change a non-empty src attribute (from "test_image_small.jpg" to "test_image_large.jpg" in the above example). This means both images are still loaded, wasting bandwidth and making the layout jump around obnoxiously. I'd prefer to fill an empty src attribute.

So basically what I need - and haven't been able to figure out - is this:

//if (screencheck.matches &&
 //item is an image tag &&
 //item has empty src attribute &&
 //item has non-empty ID attribute) {
   //set item src attribute = item ID attribute + a text string
//}

回答1:

How about loop over the images, check if src is blank, and if so fill it based on data-attribute and screen resolution?

Note this solution only changes the images on load time based on screen size at that point. See it in jsfiddle: http://jsfiddle.net/rr4qngfu/

// in document ready handler:
var screencheck = window.matchMedia("(min-width: 32em)");
var size_suffix = screencheck.matches ? '-large' : '-small';
for (var i=0; i<document.images.length; i++) {
    var img = document.images[i];
    var src_base = img.getAttribute('data-src-base');
    if (img.src == '' &&  src_base != null) {
       // remove the file extension (ie. .png, .jpg, etc..) and re-add it after the size_suffix
       var _split = src_base.split(/(^.*)(\.[^.]*)$/)
       var file_name = _split[1];
       var extension = _split[2];
       img.src = file_name + size_suffix + extension;
    }
}

Input:

<!-- example img in html -->
<img src="" data-src-base="logo.png">

Expected Result (not tested):

<!-- resulting DOM (after javascript runs on high resolution) -->
<img src="logo-large.png" data-src-base="logo.png">

来源：https://stackoverflow.com/questions/25425905/adaptive-image-id-text-string-javascript-for-responsive-images

标签

javascript

responsive-design

media-queries

matchmedia