Javascript 使用 srcset 时立即触发 img 上的加载

Question

我正在创建图像预加载，使用带有 srcset 的不可见 img，因此图像应该根据用户需要的大小进行预加载。这是预加载函数：

function preload() {
DOM.viewAreaPreload.html(Mark.up(slideTemplate, {
    presentation: preloadList[0].presentation,
    filename: preloadList[0].filename,
    preload: true
}));
preloadList.splice(0, 1);
console.log('loaded!');
if (preloadList.length > 0) {
    DOM.viewAreaPreload.find('img').onload = preload();
}}

DOM.viewAreaPreload 是一个 jQuery 对象，用于预加载图像的不可见容器

我使用 markup.js 进行模板化。这是我的幻灯片模板：

<img src="/presentations/{{presentation|url}}/{{filename|url}}" {{if preload}} id="image-preload" {{/if}}
 srcset="
      /presentations/{{presentation|url}}/{{filename|url}} 1600w,
      /presentations/{{presentation|url}}/1024x768/{{filename|url}} 1024w,
      /presentations/{{presentation|url}}/800x600/{{filename|url}} 800w,
      /presentations/{{presentation|url}}/400x300/{{filename|url}} 400w"
 sizes="90vw">

preloadList 是一个数组，包含如下对象：{presentation: 'first', filename: 'slide01.jpg'}

我期待什么：图像正在加载； onload 仅在图像完全加载时触发。

我得到了什么：所有加载都在半秒左右的时间内触发。我的所有图像请求都已排队，它们正在异步加载，而不是按我需要的顺序加载。

如何让 onload 事件仅在图像完全加载时触发？

Answer 1

我的主要问题是，感谢 A. Wolff，我在为 DOM.viewAreaPreload.find('img').onload.
即使我修复了这个问题，也只有一张图片在加载，所以我使用了 jQuery 的 on('load') 事件，效果非常好

Javascript 使用 srcset 时立即触发 img 上的加载

Javascript onload on img fired immediately, when srcset is used

javascript

image

onload

srcset