使用javascript的懶惰加載圖像

-2

我想懶加載這些圖像，以提高網站的性能。我希望已經顯示默認數量的圖像，並且我希望剩餘圖像延遲加載。這是我迄今爲止所擁有的。使用javascript的懶惰加載圖像

<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();

來源

2017-03-06 Mason Peace

你應該在進入計算器之前嘗試搜索谷歌。通過搜索問題的標題，我在第一頁的頂部找到了10多個結果。 – Gab

延遲加載圖片不會增加網站的性能。您可能會獲得更快的初始負載，但是當需要第二組圖像時，您將獲得較慢的交互。相反，您可能需要考慮將第二組加載到「新Image（）」元素中，然後根據需要顯示它們。 –

可以存儲在一個JavaScript數組的imageurls。然後當您點擊load more時，它會抓取數組中的下一個圖像，您將使用javascript創建一個img元素，即var elem = document.createElement("img");，並將src設置爲您存儲的數組中的url。

來源

2017-03-06 22:33:26 JohanP

使用javascript的懶惰加載圖像

回答

相關問題