javascript - 如何在用户滚动到它们之前加载 onScroll 背景图像？

Question

当用户滚动到该 div 的末尾时，我正在更改该 div 的背景。由于它是固定背景，我没有使用 HTML <img>标签，而不是我使用 CSS background-image: .随着以下 JavaScript功能，它在我需要时成功更改背景，并在用户滚动回顶部时恢复原状。

function transimg(divid,imgurl1,imgurl2) {  
  $(window).scroll(function(){
    var st = $(this).scrollTop();       
    var dist = $(divid).offset().top - 50;

    if(st > dist) {
      $(divid).css("background-image", "url(" + imgurl1 +")");  
    }
    else{
      $(divid).css("background-image", "url(" + imgurl2 +")");
    }
  }); 
} 

我的问题是:

显然，当用户滚动到该偏移量时，这会加载图像。当我托管网站并且用户连接速度慢时，这会导致速度变慢。所以我需要在页面开始加载时加载第二张图片。有点与延迟加载相反。我怎样才能做到这一点？

我真的不想使用任何插件。

感谢任何帮助，提前致谢!

Answer 1

您可以在加载主体之前加载它们。 (在 body 的末尾添加脚本)。

说明:当您创建一个 Image 并设置 src 属性时，图像文件将下载到您的浏览器。

var images = ['img1', 'img2'];
for (var i = 0; i < images.length; i++) {
  var img = new Image();
  img.src = images[i];
}