Question

我正在开发一个处理高流量网页的项目（非常高！）。在登陆页面上显示大量图像（~40），需要在页面加载后立即显示它们。我们不使用任何库，因为它应该在它准备好之前加载使用。我们有4个图像服务器。有没有人有任何经验，这是加载图像的最佳方式？我尝试了以下方法：

在页眉中，在<head>之后，插入了一个脚本标记：

<script>
   var img = new Image(); img.src= "src of the image";
</script>

这样做，图像开始和结束以在DOMReady和Load事件之前加载。但是，具有相同URL的页面上的图像似乎再次加载，即使它们之前已加载。网址是相同的，缓存已经开启，使用了Mozilla。

也许有一些阻止浏览器使用这些图像的机制？或者是什么？另一个问题：当DOM和图像加载并行时，它会导致任何减速吗？

Answer 1

首先，我建议使用CSS sprites。您可以在此处找到更多信息：

http://www.alistapart.com/articles/sprites

其次，如果要在DOM上加载图像，请使用以下命令：

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + event, func);
  }
}

listen('load', window, function() {
  var img = new Image();
  img.src= "src of the image";
});

使用精灵会将你的加载时间缩短一半。您消除了大多数HTTP请求，并且精灵表立即被缓存，因此用户访问的每个后续页面都已经加载了它。

修改

这是一种预加载许多图像的方法：

function preload(images) { if (document.images) { var imageArray = []; imageArray = images.split(','); var imageObj = new Image(); for (var i = 0; i < imageArray.length; i += 1) { imageObj.src = imageArray[i]; } } }

像这样调用函数：

preload('image1.jpg,image2.jpg,image3.jpg');

图像预加载......最快的方式

1 个答案: