原生js图片懒加载插件

查看演示立即下载

插件描述：滚动到图片位置再赋值src加载图片,简单实用

//获取全部带有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')
        })()
    }
})

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery+css3模仿win7自带蜘蛛纸牌(原创)
下一个特效：滑动验证登录