北京pk10直播

原生js圖片懶加載插件

所屬分類:UI-加載,滾動

 15900  163  查看評論 (3)
分享到微信朋友圈
X
原生js圖片懶加載插件 ie兼容9
//獲取全部帶有data-src的img
var limg = document.querySelectorAll("img[data-src]")
// Array.prototype.forEach.call()是一種快速的方法訪問forEach,并將空數組的this換成想要遍歷的list
Array.prototype.forEach.call(limg, function(item, index) {
    var rect
    //假如data-src為空跳出
    if (item.getAttribute("data-src") === "")
        return
    //getBoundingClientRect用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性。
    rect = item.getBoundingClientRect()
    // 圖片一進入可視區,動態加載
    if (rect.bottom >= 0 && rect.top < viewHeight) {
        (function() {
            var img = new Image()
            img.src = item.getAttribute("data-src")
            item.src = img.src
            //給圖片添加過渡效果,讓圖片顯示
            var j = 0
            setInterval(function() {
                j += 0.2
                if (j <= 1) {
                    item.style.opacity = j
                    return
                }
            }, 100)
            //去除data-src
            item.removeAttribute('data-src')
        })()
    }
})
相關插件-加載,滾動

申請表單進度表

申請表單進度表
  加載
 22300  290

圓形進度條,再也不怕圓形進度條不兼容不帥氣

圓形進度條原理。轉化為jquery也非常方便。 原理都差不多(原創)
  加載
 72249  259

jQuery 圓型進度條

jQuery canva圓型進度條,可通參數快速修改進度條
  加載
 15410  148

純css3制作綠色loading加載動畫特效

純css3制作綠色loading加載動畫特效里面包含14款不同效果的綠色清新loading加載特效。
  加載
 31854  300

討論這個項目(3)回答他人問題或分享插件使用方法獎勵jQ幣

    怪咖 0
    2018/9/30 9:38:31
    請問這個可以在 移動端使用嗎?為什么一直報 viewHeight 未定義呢?
        1230
        2018/11/14 17:39:20
        js沖突
        -_Jasminee0
        2019/3/25 14:52:57
        window.onscroll = function () {
           Limg()
        }
        window.onload = function () {
           var img = document.querySelectorAll("img[data-src]")
           for (var i = 0; i < img.length; i++) {
               img[i].style.opacity = "0"
           }
           Limg()
        }
        
        function Limg() {
           var viewHeight = document.documentElement.clientHeight
           var t = document.documentElement.scrollTop || document.body.scrollTop;
           var limg = document.querySelectorAll("img[data-src]")
           Array.prototype.forEach.call(limg, function (item, index) {
               var rect
               if (item.getAttribute("data-src") === "")
                   return
               rect = item.getBoundingClientRect()
               if (rect.bottom >= 0 && rect.top < viewHeight) {
                   (function () {
                       var img = new Image()
                       img.src = item.getAttribute("data-src")
                       item.src = img.src
                       var j = 0
                       setInterval(function () {
                           j += 0.2
                           if (j <= 1) {
                               item.style.opacity = j
                               return
                           }
                       }, 100)
                       item.removeAttribute('data-src')
                   })()
               }
           })
        }
    回復
取消回復
北京pk10直播