预加载图片会降低页面加载速度

Question

我在jquery中内置了一个幻灯片，它将图像urls存储在一个数组中。当您单击next按钮时，它会向服务器发送一个请求以获取图像，然后显示它。这是可行的，但一旦检索到图像，图像就会从上到下逐步加载。我通过添加以下代码解决了这个问题...

//Preload background images
            function MM_preloadImages() { 
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }
            MM_preloadImages(<%= preloadImages %> );

现在的问题是第一个图像需要很长时间才能加载。我认为页面会加载第一个图像，然后在后台的preload函数中加载其他图像？

谢谢你的建议。

Answer 1

我们不能从您发布的代码中判断预加载发生的顺序，但您可以将代码更改为仅在当前页面加载完成后运行MM_preloadImages。

也就是说，看起来你在一开始就预先加载了所有的图像。为什么不只预载下一两张图片，并在每次幻灯片播放时继续这样做呢？这样，当用户试图转到下一张幻灯片时，浏览器就不再忙于加载整个放映。