1

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

  • 在页面底部或

  • 在开始（<head>）？

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

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>
4

4 回答 4

1

Even though all the other answers are inherently correct. They don't seem to address you directly.

Your script is not making use of any DOM elements. Which means that waiting for the DOM to load is not a concern at all.

The halt of the layout rendering while downloading a <script/> is always a concern (unless you use new HTML5 capabilities such as async), that's why they prefer to place it before </body>.

By placing it before </body>, your rendering will not be halted. Performance-wise, iterating such a tiny array may only be a micro-optimization.

By the way, you don't need to wrap the array in $() to use .each(), you should use $.each.

function preload(arrayOfImages) {
    $.each(arrayOfImages, function(index, image){
        $('<img/>')[0].src = image;
    });
}
于 2013-01-13T12:47:57.127 回答
0

Why not making a DIV on the very begining of the BODY section and move that DIV outside of the visible area?

于 2013-01-13T12:51:02.403 回答
0

一般来说，把你的函数调用和页面加载完成后你想做的所有事情都放在里面

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

（见文档）。

这也适用于您对preload(...). 当你使用$('<img/>')[0].src = this时，浏览器会根据这个注释缓存图片：Preloading images with jQuery

编辑：<script/>正如 Konstantin 指出的那样，标签在 DOM 树中的位置只起次要作用。

于 2013-01-13T12:38:00.413 回答
0

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

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

我们通常将 JavaScript 放在页面底部，因为我们想在 DOM 准备好时做一些事情。你也可以把它放在上面！但是您必须使用$(document).ready(function(){});才能确定它会按预期工作。

因此，在页面的其余部分也在加载时，在顶部（或使用 window.onload）启动预加载。除非您使用 CSS 执行此操作，或者如果您绑定发生在页面顶部的特定 div 的加载事件并在那里预加载您的图像，否则您不会真正从顶部执行此操作获得太多好处。

于 2013-01-13T12:44:15.617 回答