Javascript 在下载映像之前，从srcset获取img currentSrc

我正在为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

注意-

窗口。加载

不合适，因为它会等待图像加载完成

---

我实际上不相信这是可能的，在这种情况下，我将不得不编写一些JS来解释

img

元素的

srcset

和

size

属性，以确定预期的

currentSrc
我找不到一种本机方法，所以我编写了JS来解释源图像。在我的例子中，我可以假设图像从小到大排序，并且在底部有一个后备img标记

这是我制作的工作演示

var vw=Math.max（document.documentElement.clientWidth||0，window.innerWidth|0）
console.log（'浏览器宽度为'+vw）；
var picture=document.getElementsByClassName（'picture-element'）[0]；
var images=picture.children
对于（变量i=0；i{console.log（'loaded'+preload.src）}
}
if（匹配项和匹配项[1]）{
var maxWidth=parseInt（匹配[1].trim（））；
console.log（'found responsive image'+image.srcset）
log（'图像应加载到宽度'+maxWidth'以下）；
if（vw{console.log（'loaded'+preload.src）}
打破
}
}
}

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