Question

这是我预装图片的代码，放在页面的头部。

我检查了浏览器的缓存，它运行正常，图像就在那里。

<script>
function preload(){
    var imgs = Object.prototype.toString.call( arguments[ 0 ]) === '[object Array]'
      ? arguments[ 0 ] : arguments;
    var tmp = [];
    var i   = imgs.length;
    for( ; i-- ; ) tmp.push( $( '<img />' ).attr( 'src', imgs[ i ]));
}
preload(
'frederic/01.jpg',
'frederic/02.jpg',
. . .
'frederic/35.jpg'
);
</script>

<body>
<div class="hidden" id="storeT">
<img src=frederic/01.jpg alt='img'>
<img src=frederic/02.jpg alt='img'>
. . .
<img src=frederic/35.jpg alt='img'>

我清除了浏览器的缓存并进行了测试。我预计页面加载时间会有很大的改进，但是这个代码没有任何差别，或没有。

此外，Pingdom Speed Test没有显示差异。

代码有问题吗？如何使用预加载来缩短加载时间？

Answer 1

仅仅因为您在Javascript中加载图片并不意味着您将获得更好的页面加载时间。我相信你提到的速度测试可以衡量单个页面的加载时间。在Javascript中加载图像的一个优点是，您可以随时以编程方式执行此操作。例如，您可以选择在页面加载完成后加载一些图像。当您加载在页面上不立即可见的图像（如在其他页面上找到的图像）或仅在用户执行操作时出现的图像（如在旋转木马中或在模态窗口中找到的图像）时，这通常会起作用。在页面上呈现，但在用户点击某些内容之前不会显示。在上面的示例中，您只是在页面加载期间使用一些内联Javascript加载图像（并且图像仍然由下面的图像标记调用），因此您不会看到速度提升。为了获得改进，您需要删除在页面加载期间加载图像文件的任何Javascript或HTML。如果您可以在页面加载完成后加载这些图像，则可以执行以下操作：

window.onload = function() {

  document.getElementById('image-1').src = 'frederic/01.jpg';
  document.getElementById('image-2').src = 'frederic/02.jpg';
}

加载时间与预加载或不加载时相同

1 个答案: