0

我正在创建图像预加载，使用带有 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 事件？

4

1 回答 1

0
  1. 我的主要问题是，感谢A. Wolff，当我为 DOM.viewAreaPreload.find('img').onload 分配回调时，我不小心使用了 ()。
  2. 即使我已经修复了这个问题，也只有一张图片正在加载，所以我使用了 jQuery 的 on('load') 事件，效果很好
于 2015-02-15T15:49:23.287 回答