使用javascript的懒惰加载图像
问题描述:
我想懒加载这些图像,以提高网站的性能。我希望已经显示默认数量的图像,并且我希望剩余图像延迟加载。这是我迄今为止所拥有的。使用javascript的懒惰加载图像
http://codepen.io/anon/pen/xqEamR
<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();
答
可以存储在一个JavaScript数组的imageurls。然后当您点击load more
时,它会抓取数组中的下一个图像,您将使用javascript创建一个img
元素,即var elem = document.createElement("img");
,并将src
设置为您存储的数组中的url。
你应该在进入计算器之前尝试搜索谷歌。通过搜索问题的标题,我在第一页的顶部找到了10多个结果。 – Gab
延迟加载图片不会增加网站的性能。您可能会获得更快的初始负载,但是当需要第二组图像时,您将获得较慢的交互。相反,您可能需要考虑将第二组加载到“新Image()”元素中,然后根据需要显示它们。 –