Question

有没有办法先加载一些图像，然后（或同时）加载其他图像？

这里的HTML结构，我想第一次所有第一张图片开始加载，顺序无关紧要，当加载的图片无关紧要时（第一张图片可以在其他图片后加载）由于大尺寸的图像）

@tutor

Answer 1

您不能使用原始HTML。虽然，您可以通过javascript添加图像，具体取决于已加载的内容。像这样：

<ul id="list">
  <li id="first-image"><img /></li> <!--first image-->
</ul>

然后，在javascript：

var list = document.getElementById('list');
var firstImage = document.getElementById('first-image');
var listItem = document.createElement('li');
var otherImage = document.createElement('img');

firstImage.onload = function () {
    listItem.appendChild(otherImage);
    list.appendChild(listItem);
};

我没有测试过代码，但它是这样的。您可以详细了解here和here。

修改

我正在阅读更多关于它的内容，我认为下面的代码存在一些问题。使用这种方式，事件将在DOM元素加载时触发，而不是必然的图像本身。我找到了另一个解决方案：

var img = document.querySelector('img') function loaded() { alert('loaded') } if (img.complete) { loaded() } else { img.addEventListener('load', loaded) img.addEventListener('error', function() { alert('error') }) }

来源：this question。

Answer 2

有一个jQuery插件可以控制图像加载的顺序：https://github.com/AlexandreKilian/imageorder

这可能对您的情况有所帮助。

有没有办法首先加载一些图像，然后（或同时）加载HTML中的其他图像？

2 个答案: