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

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

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

Answer 2

简单的 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 之前加载图像