jQuery的图像预加载与JavaScript

Question

我想在我的jquery函数中找到预加载轮播图像的最佳方法

$('<img />').attr({ 'src': imgurl }).appendTo(currentli).hide().load(function() {                   
                   console.log("preload!");
                });

寻找最好的方法，我发现建议使用2008年的旧问题

var img = new Image();
img.src = imgurl;

document.body.appendChild( img );
img.onload = function() {
console.log("preload!");
}

使用jQuery和JavaScript有什么区别吗？ 还有其他建议吗？

Answer 1

简单的javascript版本首先会在定义src时将图像加载到内存中，然后将其添加到DOM。

jQuery版本首先将其添加到DOM中，然后加载图像..这就是所有这些差异

评论更新后：-

var img = new Image();
img.src = imgurl;

$('<img />').attr({ 'src': imgurl }).appendTo(currentli).hide().load(function() {                   
                   console.log("preload!");
                });

通过这样做，您可以在将图像实际添加到DOM之前加载它

Answer 2

是的，请等到窗口准备好窗口加载事件，然后显示包含照片的实际div元素并运行该功能。 就像是...

$(window).load(function(){ 
  displayAndRunMyCarousel();
});