Question

我正在构建一个可以一次显示六个不同图像的网站/应用。这些图像的内容从另一个站点加载并定期更改。屏幕上任何特定图像的位置取决于屏幕上已有的所有图像的状态。

要获取图像，我使用jQuery更改6 src个位置之一的img属性，然后使用jQuery load()等待加载，然后显示它。但是，这意味着我必须在加载图像之前选择我的位置。我遇到的问题是，在我启动加载和图像最终加载之间，该图像的正确位置可能已经改变。

所以我的问题是，是否有一种方法可以将图像加载到屏幕外（例如隐藏在img中），然后，当它被加载时，会收到关于它已完成的通知，然后将那个图像移动到那个时刻的正确位置。

我在StackOverflow上发现了很多预加载问题和答案，但他们都假设您在启动加载时知道图像的去向。

更新：在这个问题上考虑更多，或许另一种框架方式是1）如果我将图像从非现场服务器加载到屏幕外/隐藏img并等待它加载，2）随后将屏幕/可见src的{{1}}属性设置为从服务器或浏览器缓存中提取的相同图像网址？换句话说，如果我在屏幕外加载远程图像，那么对同一图像的下一个请求会返回到服务器或浏览器缓存（这对所有浏览器都是一致的）吗？

Answer 1

一种方法：

＆＃13;

function loadImg(url, callback, key) {
  var image = new Image();
  image.onload = function() {
    callback(image, key)
  };
  image.onerror = function() {};
  image.src = url;
}

function imageOnload(image, key) {
  imageGoesTo[key].src = image.src
}

var imageGoesTo = {
  "firstPicture": document.getElementById("img1"),
  "secondPicture": document.getElementById("img2"),
}

loadImg("http://7pi.azurewebsites.net/img/DSC09906.jpg", imageOnload, "firstPicture")
imageGoesTo["secondPicture"] = document.getElementById("img3")
loadImg("http://7pi.azurewebsites.net/img/DSC07934.jpg", imageOnload, "secondPicture")

＆＃13;

<img id="img1" alt="loading">
<img id="img2" alt="loading">
<img id="img3" alt="loading">

＆＃13;

如何在屏幕外预加载图像然后移动到不同的屏幕元素？

1 个答案: