0

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

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

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

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

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

4

1 回答 1

0

首先，我会推荐使用 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";
});

使用 sprite 会将加载时间减半。您消除了大部分 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');
于 2012-03-07T15:42:00.710 回答