Question

我必须加载大约60个图像阵列的图像序列动画。我想要单独加载这个特定的序列。表示图像加载时间不会影响整页加载时间。因为用图像序列动画加载页面需要花费太多时间。目前我已经在HTML代码中添加了所有60个序列图像并设置了＃34; display：none＆＃34;用页面加载。

是否有可能单独加载此图像或在加载整个html页面后加载。或任何其他更好的解决方案。

提前致谢。

Answer 1

使用javascript / jquery

动态加载它们

var imagePaths = ["img1.png", ....];
$(document).ready(function(){
   for(var i=0; i<imagePaths.length; i++) {
      var newImg = $('<img style="display:none;" />'); //Add any class or attribute you want or anything for images.
      newImg.bind("load", function(){
         $(this).show();
      });
      newImg.attr("src", imagePaths[i]);
      $(parentSelector).append(newImg);
   }
});

当您从脚本动态加载时，您的HTML页面将已加载并可供使用。之后所有的图像都会逐渐显现出来。

修改此外，如果您希望隐藏图像直到它完全加载，您最初可以设置display:none;内联并附加一个onload侦听器，display:block。

希望这会有所帮助。如果我错过了什么，请告诉我。

Answer 2

是的，这是可能的。

var images[60];
var names[60]={"img1.jpg","img2.jpg"...}

function loadImages() {
  for(var i=0;i<60;i++) {
    images[i] = new Image();
    images[i].src = "www.myWebPage.com/"+names[i];
  }
}

此功能现在将加载图像。只需确保在页面加载后调用它。

<body onLoad="loadImages()">
...
</body>

以HTML格式加载图像序列

2 个答案: