下载图片前从srcset获取img currentSrc答案

【问题标题】：Get img currentSrc from srcset before the image is downloaded下载图片前从srcset获取img currentSrc
【发布时间】：2019-07-11 00:03:05
【问题描述】：

我正在为 Vue.js 编写图像预加载器。我打算让它工作的方式是在循环和预加载每个图像之前，为任何 img 元素抓取 DOM 并获取它们的 currentSrc 属性。

考虑以下基本示例：

const images = [];

window.addEventListener('DOMContentLoaded', () => {

    // Scrape the DOM for any images
    document.querySelectorAll('img').forEach(item => {

        images.push(item.currentSrc);

    });

    // Run the preload script...
    preload(images);

});

问题

上述方法的问题是img元素还没有决定currentSrc是基于srcset是什么。

有没有办法或监听事件，以便能够在图像实际下载之前访问currentSrc？

注意 - window.load 不合适，因为它会等到图像加载完毕

我实际上并不相信这是可能的，在这种情况下，我将不得不编写一些 JS 来解释 img 元素的 srcset 和 sizes 属性以确定预期的 @ 987654332@.

【问题讨论】：

标签： javascript html vue.js srcset

【解决方案1】：

我找不到执行此操作的本地方法，因此我编写了 JS 来解释源图像。在我的情况下，我可以假设图像是从小到大排序的，并且底部有一个后备 img 标签

这是我制作的一个工作演示 https://jsfiddle.net/mattbucci/x1h5pb4z/96/

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
console.log('browser width is ' + vw);

var picture = document.getElementsByClassName('picture-element')[0];
var images = picture.children

for (var i = 0; i < images.length; ++i) {
 var image = images[i]; 
 var matches = null;
 if (image.media !== undefined) {
     matches = image.media.match(/\(max-width:(.*)px\)/);
 } else {
     console.log('found fallback image ' + image.src)
     console.log(image.src + ' is being loaded')
     var preload = new Image();
     preload.src = image.src;
     preload.onload = () => { console.log('loaded ' + preload.src)}
 }

 if (matches && matches[1]) {
    var maxWidth = parseInt(matches[1].trim());
    console.log('found responsive image ' + image.srcset)
    console.log('image should be loaded below width ' + maxWidth);

    if (vw < maxWidth) {
      console.log(image.srcset + ' is being loaded')
      var preload = new Image();
      preload.src = image.srcset;
      preload.onload = () => { console.log('loaded ' + preload.src)}
      break;
    }
 }
}

【讨论】：