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进行模板化。这是我的slideTemplate：

<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：＆＃39; first＆＃39;，filename：＆＃39; slide01.jpg＆＃39;}

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

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

如果图像完全加载，如何使onload事件触发？

Answer 1

我的主要问题是，感谢A. Wolff，当我为DOM.viewAreaPreload.find（'img'）。onload指定回调时，我偶然使用了（）。
即使我已经解决了这个问题，只加载了一个图像，所以我使用了jQuery的on（'load'）事件，这个事件很有效。

当使用srcset时，立即触发img上的Javascript onload

1 个答案: