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

当用户滚动到div的末尾时，我正在更改div的背景。由于它是固定的背景，我没有使用HTML

标记，而是使用CSS

背景图像：

。使用下面的

JavaScript

函数，它可以在需要时成功地更改背景，并在用户返回顶部时恢复

函数transimg（divid，imgurl1，imgurl2）{
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
var dist=$（divid）.offset（）.top-50；
如果（st>dist）{
$（divid）.css（“背景图像”，“url”（+imgurl1+））；
}
否则{
$（divid）.css（“背景图像”，“url”（+imgurl2+））；
}
}); 
} 

我的问题是: 显然，当用户滚动到该偏移量时，会加载图像。这使得当我托管站点并且用户的连接速度较慢时，速度会变慢。所以我需要在页面开始加载时加载第二个图像。与惰性负载相反。我怎样才能做到这一点

我真的不想使用任何插件

---

感谢您的帮助，提前谢谢

您可以在加载主体之前将其加载到中。（将脚本添加到

正文的末尾

）

说明：创建

图像

并设置

src

属性时，图像文件将下载到浏览器中

var-images=['img1'，'img2']；
对于（var i=0；i

您可以在

divid

中添加2个

背景图像，这样它们都会在页面刷新时加载，然后使用JQ在
背景图像之间切换，具体取决于滚动

请参阅下面的代码片段。让我知道它是否有用（我在网络中签入，页面刷新时两个图像都会加载）


$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
var dist=$（“#容器”）.offset（）.top-50；
如果（st>dist）{
$（“#容器”）.css（“背景图像”，“url”（+）http://i.imgur.com/AsqlqnG.jpg" +")");  
}
否则{
$（“#容器”）.css（“背景图像”，“url”（+）http://i.imgur.com/I8170KA.jpg" +")");
}
}); 
#容器{
背景图像：url（“http://i.imgur.com/I8170KA.jpg“”，url（“”）http://i.imgur.com/AsqlqnG.jpg");
背景尺寸：包含；
背景重复：无重复；
高度：800px；
宽度：100%；
边缘顶部：50px；
位置：相对位置；
}
正是我想要的。。非常感谢：）我的荣幸：）祝你好运。