知道何时加载特定资源

Question

对不起，如果该线程已被支配，但我在浏览器中没有找到它。

我想创建/处理一个事件，让我知道当特定资源加载到网页中时。（类似于Onload或Domcontentload，但是我需要知道每个资源何时完成，而不是整个页面）示例 -> Assets = Image1，Image2，Image3，...

完成加载image1触发准备事件时，

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

继续前进...继续前进....

最后一个图像后，再次触发就绪事件。

最终结果与domcontentloaded或" Windows.onload"相同，但是正如我所说的那样，我并不是要将某些逻辑放在资产中间。

有人知道如何处理这种事情吗？

Answer 1

我不确定，为什么（或是否）您想以特定顺序'加载'图像。请注意，浏览器很少打开单个连接。通常，将收集所有资源（下载HTML本身之后），并且浏览器将同时加载许多资源。简而

懒负载图像的一种更常见的方法是使用视口/滚动位置来确定应该加载哪些图像的"下一步"，例如，有一些jQuery插件，例如。懒惰。

无论如何 - 在的情况下

$("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); }

Answer 2

我不确定这是否对您有用，但是您尝试了Settimeout函数吗？

您可以为您的图像加载特定时间（通过Ajax，您可以调用资源并等到请求直到请求），然后将其致电下一个。

我还发现了与您的请求"类似"的东西：如何等待另一个JS加载以进行操作？

对不起，如果这对您没有帮助。