知道特定资源何时完成加载

Question

抱歉，如果这个帖子被重复了，但我没有在浏览器中找到它。

我想要 create/handle 一个让我知道特定资源何时加载到网页中的事件。（类似于 onload 或 DOMContentLoaded，但我需要知道每个资源何时完成，而不是整个页面）示例--> 资产 = image1,image2,image3,...

当完成加载 image1 时触发就绪事件，

就绪事件触发后开始加载image2

继续……继续……

最后一张图片后，再次触发就绪事件。

最终结果与 DOMContentLoaded 或 "windows.onload" 相同，但正如我所说，我无法在资产加载过程中放置一些逻辑。

有人知道怎么处理那种事情吗？

Answer 1

我不确定这是否适合你，但你试过 setTimeOut 函数了吗？

您可以为您的图片设置一个特定的加载时间（通过ajax，您可以调用资源并等到request.done），然后调用下一个一。

我还在此处找到了符合您要求的内容 'similar'： How to wait for another JS to load to proceed operation?

抱歉，如果这对您没有帮助。

Answer 2

我不确定您为什么（或是否）想要 'load' 按特定顺序排列图像。请注意，浏览器很少打开单个连接。通常所有资源都将被收集（在下载 html 本身之后）并且浏览器将并行加载其中的许多资源。简而言之 - 如果你这样做是为了性能或速度，你会减慢进程！

延迟加载图像的一种更常见的方法是使用视口/滚动位置来决定应加载哪些图像"next"，有一些 jquery 插件，例如lazyload.

无论如何 - 如果你不关心顺序并且你只想在准备好时进行特定于元素的回调，你可以做像这样：

$("img").one("load", function() {
  var $this = this;
  // 'this' is your specific element
  // do whatever you like to do onready
}).each(function() {
  // handle cached elements
  if(this.complete) $(this).load();
});

万一你确实关心顺序并且你真的想在第一张图片准备好后加载下一张图片你需要一种不同的方法。

首先：您的 HTML 不包含图片来源，但包含具有数据属性的图片：

<img data-src="the/path/to/your/image" data-assets-order="1" />

其次：在JS中，你收集所有这些没有真正来源的图像，你对集合进行排序，最后一个接一个地触发加载。

var toLoad = [];

// scanning for all images with a data-src attribute 
// and collect them in a specified order.
$('img[data-src]').each(function() {
  // either you define a custom order by a data-attribute (data-assets-order) 
  // or you use the DOM position as the index. Mixing both might be risky.
  var index = $(this).attr('data-assets-order') ? 
    $(this).attr('data-assets-order') : toLoad.length;
  // already existing? put the element to the end
  if (toLoad[index]) { index = toLoad.length; }
  toLoad[index] = this;
});

// this method handles the loading itself and triggers
// the next element of the collection to be loaded.
function loadAsset(index) {
  if (toLoad[index]) {
    var asset = $(toLoad[index]);
    // bind onload to the element
    asset.on("load", function() {
        // in case it is ready, call the next asset
        if (index < toLoad.length) {
          loadAsset(index + 1);
        }
    });
    // set the source attribut to trigger the load event
    asset.attr('src', asset.attr('data-src'));
  }
}

// we have assets? start loading process
if (toLoad.length) { loadAsset(index); }

知道特定资源何时完成加载

know when specific resource finish loading

javascript

jquery

callback

event-handling

onload