博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端处理图片懒加载
阅读量:6188 次
发布时间:2019-06-21

本文共 1111 字,大约阅读时间需要 3 分钟。

//照片墙图片懒加载function lazyLondImg() {    var lazyImgs = $(".js-lazyLoad"), //需要懒加载的图片        lazyIndex = 0, //加载到的图片index        curHeight = document.documentElement.clientHeight, //初始页面高度        myY = 0, tmpY = 0;    function showImg() {        for(var i = lazyIndex; i < lazyImgs.length; i++){            var curImgEle = lazyImgs[i];            var imgTop = curImgEle.parentNode.offsetTop;            if((imgTop-$("body").scrollTop()) <= curHeight + 10){//                页面初始化加载浏览器可见区域图片                lazyIndex = i;                curImgEle.setAttribute("src",curImgEle.getAttribute("datasrc"));            }else{                break;            }        }    }    showImg();    document.body.addEventListener("touchstart",function (event) {        myY = event.touches[0].clientY;    });    document.body.addEventListener("touchmove",function (event) {        tmpY = event.touches[0].clientY;        if(myY - tmpY >= 10){            showImg();        }    });    document.body.addEventListener("touchend",function (event) {        showImg();    });}

  

转载于:https://www.cnblogs.com/qingranEvent/p/7155945.html

你可能感兴趣的文章
gulp API 简介
查看>>
项目经理的权宜之计
查看>>
redis应用之使用sentinel实现主从复制高可用
查看>>
软件工程院校排名
查看>>
Excle 创建下拉列表
查看>>
SSH原理之图文详解
查看>>
yum的repo文件详解、以及epel简介、yum源的更换
查看>>
我的友情链接
查看>>
第 三 十 九 天:更 换 yum 源 和 卸 载 图 形 界 面
查看>>
1,Python13_day1
查看>>
flask-uploads扩展的使用
查看>>
小猪佩奇社会人专用服务器,有意思的python小程序,附python代码
查看>>
设计模式--代理模式
查看>>
codeblock 快捷键
查看>>
共享程序集和强命名程序集
查看>>
机器学习--逻辑回归_LR(内附细说极大似然估计,梯度下降法)
查看>>
Centos7禁止或者允许开机启动服务
查看>>
浏览器重绘和回流
查看>>
14-python-函数
查看>>
微信小程序开发之路之组件化
查看>>