自适应图像的自适应(“图像ID +文本字符串")JavaScript [英] 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";
   }
}

(编辑)新的精简版JavaScript:

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

我真的很喜欢用于图像更改的图像ID +文本字符串"方法.它允许单个脚本(每个媒体查询)运行所需数量的图像.许多响应式图像脚本/插件/库都涉及到这一点.很多.标记.

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.)最初是为"onMouseOver"过渡效果设计的，此脚本需要一个事件侦听器.对于响应式图像脚本，这不是理想的选择，因为在"onLoad"事件结束后很长时间调整了浏览器的大小，并且移动设备更改了方向.

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.)此脚本只能更改非空的src属性(在上面的示例中，从"test_image_small.jpg"更改为"test_image_large.jpg").这意味着两个图像仍然被加载，浪费了带宽并使布局令人讨厌地跳来跳去.我希望填写一个空的src属性.

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

推荐答案

如何循环遍历图像，检查src是否为空白，是否根据数据属性和屏幕分辨率进行填充?

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

请注意，此解决方案仅在那时根据屏幕大小更改图像. 在jsfiddle中查看: http://jsfiddle.net/rr4qngfu/

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

输入:

<!-- 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">

这篇关于自适应图像的自适应(“图像ID +文本字符串")JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！