Question

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

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

Answer 1

如何循环覆盖图像，检查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">

自适应（＆＃34;图像ID +文本字符串＆＃34;）响应式图像的JavaScript

1 个答案: