溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js實現多張圖片延遲加載效果的具體代碼，供大家參考，具體內容如下
具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--做移動端響應式必須加的樣式-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
ul,li{
list-style:none;
}
img{
display:block;
border:none;
}
/*
最外層容器不設定寬高的
*/
.news{
padding:10px;
}
.news li{
height:60px;
padding:10px 0;
border-bottom:1px solid #dedede;
position:relative;
}
.news li > div:nth-child(1){
position:absolute;
top:10px;
left:0;
width:75px;
height:60px;
background:url('img/default.png') no-repeat center center;
background-size:100% 100%;/*設置背景圖片大小*/
}
.news li > div:nth-child(1) img{
width:100%;
height:100%;
display:none;
opacity:0;
}
.news li > div:nth-child(2){
height:60px;
margin-left:80px;
}
.news li > div:nth-child(2) h3{
height:20px;
line-height:20px;
/*實現文字超出隱藏*/
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.news li > div:nth-child(2) p{
line-height:20px;
font-size:12px;
color:#ccc;
}
</style>
</head>
<body>
<ul id='news' class='news'>
<li>
<div>
<img src="" alt="">
</div>
<div>
<h3>我是一個標題</h3>
<p>我是內容</p>
</div>
</li>
</ul>
<script>
var news = document.getElementById('news')
var imgList = news.getElementsByTagName('img')
//1、獲取需要綁定的數據（Ajax）
var jsonData = null;
~function(){
var xhr = new XMLHttpRequest();
//URL地址后面加的隨機數是在清除每一次請求數據時候（GET請求）產生的緩存
xhr.open('GET','data.json?_='+Math.random(),false)
xhr.onreadystatechange = function(){
if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
var val = xhr.responseText;
jsonData = utils.formatJSON(val)
}
}
xhr.send(null)
}()
//2、數據綁定->把jsonData存儲的數據綁定到頁面中（字符串拼接）
~function(){
var str = '';
if(jsonData){
for(var i = 0,len = jsonData.length;i<len;i++){
var curData = jsonData[i]
str+='<li>';
str+='<div><img src="" trueImg="'+curData['img']+'"></div>';
str+='<div>';
str+='<h3>'+curData['title']+'</h3>';
str+='<p>'+curData['desc']+'</p>';
str+='</div>';
str+='</li>';
}
}
news.innerHTML = str;
}()
//3、圖片延遲加載
//我先編寫一個方法實現單張圖片的延遲加載
function lazyImg(curImg){
var oImg = new Image;
oImg.src = curImg.getAttribute('trueImg');
oImg.onload = function(){
curImg.src = this.src;
curImg.style.display = "block";
fadeIn(curImg)
oImg = null
};
curImg.isLoad = true;
}
function fadeIn(curImg){
var duration = 500,interval = 10,target = 1;
var step = (target/duration)*interval;
var timer = window.setInterval(function(){
var curOP = utils.getCss(curImg,'opacity');
if(curOP>1){
curImg.style.opacity = 1;
window.clearInterval(timer)
return
}
curOP+=step;
curImg.style.opacity = curOP;
},interval)
}
function handleAllImage(){
for(var i = 0,len = imgList.length;i<len;i++){
var curImg = imgList[i];
//當前的圖片處理過了就不需要在重新的進行處理了
if(curImg.isLoad = true){
continue;
}
//只有A小于B的時候才進行處理,當前圖片是隱藏的，我們其實計算的是它父節點的A
var curImgPar = curImg.parentNode;
var A = utils.offset(curImgPar).top + curImgPar.offsetHeight;
var B = utils.win('clientHeight')+utils.win('scrollTop');
if(A<B){
lazyImg(curImg);
}
}
}
//4、開始的時候一秒加載第一屏的圖片，當滾動條滾動的時候，再加載剩余的圖片
window.setTimeout(handleAllImage,1000);
window.onscroll = handleAllImage;
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
