Question

我在这里阅读有关预加载图像数组以便更快加载网页的信息，这样当应用程序需要显示它们时，它就会被加载并可以立即显示。但我怀疑是在哪里包含代码片段：

位于页面底部或
一开始（<head>）？

因为，我还读到，为了快速加载，应该包括底部的所有javascripts。哪个会更好？或者我必须在两种方式上妥协？

javascript代码：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
preload([
    'images/bg.jpg',
    'images/logo1.png',
]);
</script>

Answer 1

即使所有其他答案本质上都是正确的。他们似乎没有直接对你说。

您的脚本没有使用任何DOM元素。这意味着等待DOM加载根本不是一个问题。

下载<script/>时停止布局渲染始终是一个问题（除非您使用新的HTML5功能，例如async），这就是为什么他们更愿意将其置于</body>之前

将其放在</body>之前，您的渲染不会停止。在性能方面，迭代这样一个微小的阵列可能只是一个微优化。

顺便说一下，您不需要将数组包装在$()中以使用.each()，您应该使用$.each。

function preload(arrayOfImages) {
    $.each(arrayOfImages, function(index, image){
        $('<img/>')[0].src = image;
    });
}

Answer 2

通常，在页面完成加载

后，将函数调用和您想要执行的所有操作放在一起

$(document).ready(function() {
  // Handler for .ready() called.
});

（见Docs）。

这也适用于您对preload(...)的通话。当您使用$('<img/>')[0].src = this时，浏览器会根据此评论缓存图片：Preloading images with jQuery

编辑：正如Konstantin所指出的，DOM树中<script/>标记的位置只扮演次要角色。

Answer 3

HTML页面的顶部和底部是相关的，因为这是浏览器读取页面的方式。顶部的东西在底部的东西之前完成。

关于图像预加载，您应该在<head>的页面顶部进行。 为什么？因为您还不需要使用它。页面的其余部分还没有准备好，很可能你想要放置图像的地方甚至还不存在。

我们通常将JavaScript放在页面底部，因为我们想在DOM准备就绪时执行某些操作。你也可以把它放在首位！但是你必须使用$(document).ready(function(){});以确保它能按预期工作。

因此，在页面的其余部分加载时，在顶部（或使用window.onload）启动预加载。除非你使用CSS或者绑定页面顶部发生的特定div的加载事件并在那里预加载图像，否则你不会真正从顶部做到这一点。[/ p>

Answer 4

为什么不在BODY部分的最开始处制作DIV并将DIV移到可见区域之外？

预加载图像阵列以加快加载速度

4 个答案: