快捷導(dǎo)航

js實(shí)現(xiàn)多張圖片延遲加載效果

更新時(shí)間：2017年07月17日 16:50:40 作者：diasa

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多張圖片延遲加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)多張圖片延遲加載效果的具體代碼，供大家參考，具體內(nèi)容如下

具體代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--做移動(dòng)端響應(yīng)式必須加的樣式-->
  <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;
    }
    /*
      最外層容器不設(shè)定寬高的
    */
    .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%;/*設(shè)置背景圖片大小*/
    }
    .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) h2{
      height:20px;
      line-height:20px;
      /*實(shí)現(xiàn)文字超出隱藏*/
      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>
        <h2>我是一個(gè)標(biāo)題</h2>
        <p>我是內(nèi)容</p>
      </div>
    </li>
  </ul>

  <script>
    var news = document.getElementById('news')
    var imgList = news.getElementsByTagName('img')
    //1、獲取需要綁定的數(shù)據(jù)（Ajax）
    var jsonData = null;
    ~function(){
      var xhr = new XMLHttpRequest();
      //URL地址后面加的隨機(jī)數(shù)是在清除每一次請(qǐng)求數(shù)據(jù)時(shí)候（GET請(qǐng)求）產(chǎn)生的緩存
      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、數(shù)據(jù)綁定->把jsonData存儲(chǔ)的數(shù)據(jù)綁定到頁面中（字符串拼接）
    ~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+='<h2>'+curData['title']+'</h2>';
          str+='<p>'+curData['desc']+'</p>';
          str+='</div>';
          str+='</li>';
        }
      }
      news.innerHTML = str;
    }()
    //3、圖片延遲加載
    //我先編寫一個(gè)方法實(shí)現(xiàn)單張圖片的延遲加載
    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];
        //當(dāng)前的圖片處理過了就不需要在重新的進(jìn)行處理了
        if(curImg.isLoad = true){
          continue;
        }
        //只有A小于B的時(shí)候才進(jìn)行處理,當(dāng)前圖片是隱藏的，我們其實(shí)計(jì)算的是它父節(jié)點(diǎn)的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、開始的時(shí)候一秒加載第一屏的圖片，當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候，再加載剩余的圖片
    window.setTimeout(handleAllImage,1000);
    window.onscroll = handleAllImage;
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

分享十八個(gè)殺手級(jí)JavaScript單行代碼
這篇文章主要給大家分享了十八個(gè)殺手級(jí)JavaScript單行代碼,這些單行代碼可以幫助你提高工作效率并可以幫助調(diào)試代碼,對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-10-10
本文通過實(shí)例給大家詳解介紹了Bootstrap筆記之縮略圖、警告框知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03

深入理解JavaScript系列（14）作用域鏈介紹(Scope Chain)

在第12章關(guān)于變量對(duì)象的描述中，我們已經(jīng)知道一個(gè)執(zhí)行上下文的數(shù)據(jù)（變量、函數(shù)聲明和函數(shù)的形參）作為屬性存儲(chǔ)在變量對(duì)象中

2012-04-04

javascript作用域鏈(Scope Chain)用法實(shí)例解析

這篇文章主要介紹了javascript作用域鏈(Scope Chain)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript作用域鏈(Scope Chain)的概念、功能與相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

2015-11-11

問題解析有JSDoc還需要TypeScript嗎

這篇文章主要介紹了有JSDoc還需要TypeScript的問題示例解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

2023-06-06

JS中作用域和變量提升(hoisting)的深入理解

相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實(shí)際代碼，希望能夠以一個(gè)比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。

2016-10-10

思維導(dǎo)圖插件jsMind的詳細(xì)使用指南

jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純的javascript類庫,其基于HTML5的帆布進(jìn)行設(shè)計(jì).jsMind以BSD協(xié)議開源,這篇文章主要給大家介紹了關(guān)于思維導(dǎo)圖插件jsMind的詳細(xì)使用指南,需要的朋友可以參考下

2024-07-07