Question

我正在为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来解释其中的srcset元素的sizes和img属性以便确定预期的currentSrc。

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

下载图像之前从srcset获取img currentSrc

问题

1 个答案: