0

我一直在使用以下代码进行响应式图像替换：

//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";
   }
}

（编辑）新的精简版 JavaScript：

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

我真的很喜欢用于图像更改的“图像 ID + 文本字符串”方法。它允许单个脚本（每个媒体查询）根据需要运行尽可能多的图像。许多响应式图像脚本/插件/库都涉及到这一点。很多。加价。

但是这个特定的脚本只能工作：

1.) 最初是为“onMouseOver”翻转效果设计的，这个脚本需要一个事件监听器。这对于响应式图像脚本来说并不理想，因为在“onLoad”事件结束后很长时间会调整浏览器的大小并且移动设备会改变方向。

2.) 此脚本只能更改非空的 src 属性（上例中从“test_image_small.jpg”更改为“test_image_large.jpg”）。这意味着两个图像仍在加载，浪费带宽并使布局令人讨厌地跳来跳去。我宁愿填写一个空的 src 属性。

所以基本上我需要 - 并且无法弄清楚 - 是这样的：

//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
//}
4

1 回答 1

0

如何循环图像，检查是否src为空白，如果是，则根据数据属性和屏幕分辨率填充它？

请注意，此解决方案仅根据当时的屏幕尺寸更改加载时间的图像。在 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;
    }
}

输入：

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

预期结果（未测试）：

<!-- resulting DOM (after javascript runs on high resolution) -->
<img src="logo-large.png" data-src-base="logo.png">
于 2014-08-21T12:59:57.827 回答