gpt4 book ai didi

javascript - 预加载图像数组以加快加载速度

转载 作者:行者123 更新时间:2023-11-28 02:30:25 25 4
gpt4 key购买 nike

我在 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>

最佳答案

尽管所有其他答案本质上都是正确的。他们似乎没有直接向您讲话。

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

下载<script/>时布局渲染停止始终是一个问题(除非您使用新的 HTML5 功能,例如 async ),这就是为什么他们更喜欢将其放在 </body> 之前。 .

将其放在 </body> 之前,您的渲染不会停止。从性能 Angular 来看,迭代如此小的数组可能只是一种微观优化。

顺便说一句,您不需要将数组包装在 $() 中使用.each() ,你应该使用$.each .

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

关于javascript - 预加载图像数组以加快加载速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14303412/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com