使用javascript延迟加载图像

我想延迟加载这些图像以提高网站的性能。我希望已经显示了默认数量的图像，并希望延迟加载剩余的图像。这就是我目前所拥有的

1
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
身体{
背景色：#f6f6f6；
宽度：400px；
保证金：60像素自动；
边缘顶部：5px；
字体：标准13px/100%无衬线；
颜色：#444；
}
img{
宽度：30px；
高度：30px；
}
div{
显示：无；
填充：10px；
边框宽度：0 1px 1px 0；
边框样式：实心；
边框颜色：#fff；
盒影：0 1px 1px#ccc；
边缘底部：5px；
背景色：#f1f1；
}
托普先生{
位置：固定；
底部：10px；
右：20px；
}
.托普a{
显示：无；
}
a、 a:参观了{
颜色：#33739E；
文字装饰：无；
显示：块；
利润率：10px0；
}
a:悬停{
文字装饰：无；
}
#荷德莫尔{
填充：10px；
文本对齐：居中；
背景色：#33739E；
颜色：#fff；
边框宽度：0 1px 1px 0；
边框样式：实心；
边框颜色：#fff；
盒影：0 1px 1px#ccc；
}
#加载更多：悬停{
背景色：#fff；
颜色：#33739E；
}
（功能（）{
var divElements=[].slice.call（document.queryselectoral（“div”））；
var loadMore=document.querySelector（“#loadMore”）；
var-divNumber=2；
loadMore.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
对于（变量i=0；i=divElements.length）{
loadMore.innerHTML=“加载完成”；
返回；
}
}
divElements.拼接（0，divNumber）；
});
})();
loadMore.click（）；

您可以将ImageURL存储在javascript数组中。然后，当您单击

load more

，它从数组中获取下一个imageURL，您使用javascript创建

img

元素，即

var elem=document.createElement（“img”）

并将

src

设置为数组中存储的url。

在访问stackoverflow之前，您应该尝试搜索google。通过搜索问题的标题，我在第一页的顶部找到了10多个结果。延迟加载图像不会提高网站的性能。您可能会获得更快的初始加载，但当需要第二组图像时，您将获得较慢的交互。相反，您可能需要考虑将第二组加载到<代码>新图像（）/<代码>元素中，然后根据需要显示它们。

 <div> <img src="http://i.imgur.com/CmU3tnl.jpg"> 1 </div>
 <div> <img src="http://i.imgur.com/TDdxS9H.png"> 2 </div>
 <div> <img src="http://i.imgur.com/39rpmwB.jpg"> 3 </div>
 <div> <img src="http://i.imgur.com/1lBZQ1B.png"> 4 </div>
 <div> <img src="https://i.imgur.com/Y5Ld4Qfh.jpg"> 5 </div>
 <div> <img src="http://i.imgur.com/8HumESY.jpg"> 6 </div>
 <div> <img src="http://i.imgur.com/CqCZBvk.png"> 7 </div>
 <div> <img src="http://i.imgur.com/wQVPRVp.png"> 8 </div>
 <div> <img src="http://i.imgur.com/9inrOjD.png"> 9 </div>
 <div> <img src="http://i.imgur.com/jv0QZgx.jpg"> 10</div>
 <div> <img src="http://i.imgur.com/xWmaeb6.png"> 11</div>
 <div> <img src="http://i.imgur.com/t73lyDn.png"> 12</div>

 <a href="#" id="loadMore">Load More</a>

 body {
background-color: #f6f6f6;
width: 400px;
margin: 60px auto;
margin-top: 5px;
font: normal 13px/100% sans-serif;
color: #444;
 }
 img{
width:30px;
height:30px;
 }
 div {
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
 }
 .totop {
position: fixed;
bottom: 10px;
right: 20px;
 }
 .totop a {
display: none;
 }
 a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
 }
 a:hover {
text-decoration: none;
 }
 #loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
 }
 #loadMore:hover {
background-color: #fff;
color: #33739E;
 }

 (function() {
var divElements = [].slice.call(document.querySelectorAll("div"));
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;

loadMore.addEventListener('click', function(e) {
    e.preventDefault();
    for (var i = 0; i < divNumber; i++) {
    window.scrollTo(0,document.body.scrollHeight);
        if (i < divElements.length) {
            divElements[i].style.display = 'block';
        }

        if (i >= divElements.length) {
            loadMore.innerHTML = "Load Completed";
            return;
        }

    }
    divElements.splice(0, divNumber);

  });
 })();
 loadMore.click();