详细分析如何实现图片懒加载(lazyload)，提高用户体验 代码人生

  • 懒加载的意义（为什么要使用懒加载）


  • 原理


  • 代码


懒加载的意义（为什么要使用懒加载）

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理


将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注：图片要指定宽高 

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />


当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

代码


在写代码前，需要了解各种高度。可以参考这篇文章：https://mrxn.net/codelife/jQuery-css-scrollTop-scrollLeft-offsetLeft.html 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

JavaScript 


<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
    window.onscroll = lazyload;
    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>

jQuery 

<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');
    lazyload();
    $(window).scroll(lazyload);
    function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);
                    n = i + 1;
                }
            }
        }
    }
</script>



使用节流函数进行性能优化

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。

我想实现限制触发频率，来优化性能。

节流函数：只允许一个函数在N秒内执行一次。下面是一个简单的节流函数： 

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔，重新设定定时器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));



标签: 分享 JS html
admin 发布于  2016-12-2 20:15 
评论(0)  浏览(2908)

看完借贷宝那个10G的压缩包，我真心觉得那帮姑娘疯了。。。 杂七杂八

不是说她们穷疯了，而是说脑子真的不好。


借款的大部分是93年到97年的，也有个别81年82年的。她们借钱的条件不光是裸照，要拍扣下体和身份证一起的特写，有的还要放自摸或和别人ooxx的视频。

640.jpg

4.jpg


这个都是自己作的也就算了，除了这些还要提供身份证、护照、微信号、学校、班级、专业、学生证、转考证、食堂卡、同学电话、室友电话、家庭地址、父母电话、支付宝账号，支付宝密码、芝麻信用分。。。


有些脑子不好的把父母的身份证工作单位都给高利贷了。


最心酸的是她们的欠条，仔细看借款数字和条件，大部分是几千块，那些年轻漂亮的高利贷肯借2万的，长得丑只能借到800。。。

2(.jpg



全套看下来这帮放贷的借钱赚利息好像并不在乎能不能收回来，这么高的利息和杀人差不多了， 貌似放高利贷是醉翁之意不在酒，能还上高额的利息也不错， 还不出也不怕。


人家国外黑社会还会有什么规矩尽量不搞学生，这边倒好，感觉他们主要目的就是搜集一批年轻缺钱没什么见识更没人脉还不在乎面子没有羞耻心的学生，反正你啥都不懂，都沦落到跑我这来借钱了你身边肯定也没有能帮你出头的人了，之后叫你们去裸聊也好，搞卖肉也好，反正手上有大把不懂事学生妹不愁赚不到钱。

3.jpg



看聊天记录个别姑娘和房贷的聊天记录甚至有种这位早就想下海但是找不到门路这回终于找到组织的荒谬感。

5.jpg



反正也都成年了，想作死别人也拦不住，那我为什么说那帮姑娘疯了呢，就是有几个我看蚂蚁花呗的钱都还不上了，估计是能套现的都套了，都已经山穷水尽了。

6.jpg



都已经沦落到拿裸照去借钱了，这几位还不忘记拿个自拍杆找着角度拍蛇精脸的裸照。


而且照片一看就是美图秀秀液化了好久，你都在被逼到去拍裸照了还不忘记把眼睛变大把腰弄细把腿拉长，有这种心思和精力出门动动脑子或者打个工度过一下难关很难吗。不这么干的理由如果是性格或者心理原因那还值得同情，可是大部分人又不像，很多的生活照看起来还过得很优越， 真心不知道该说她们啥好。


***************************


受害人的隐私信息头像我全部截掉了，有头像的都是高利贷，当然也不可能是真头像，反正别问我在哪里看的，知道我也不说，这篇只是单纯讨论这个事情。那啥女儿德育教育一定要跟上，实在跟不上千万要富养啊。

最后，各位看官，切记看人不能看照片，美图秀秀这类软件已经惨无人性了-_- ||


标签: 隐私窃取 分享 生活
admin 发布于  2016-12-1 13:08 
评论(13)  浏览(7958)

搜索

日历

最新文章

最新评论

分类

标签

RSA 技术 proxy CTF data-leak xray 任意文件读取 列目录 未授权 WeChatDownload haproxy powershell AWS Acunetix navicat xml注入 FCKeditor TeamViewer 华硕 BIOS rce CobaltStrike getshell Thinkphp hackbar 编码 指纹识别 CMS识别 油猴脚本 暗网 阿里云 cmd乱码 Supervisor Jetbrains激活 Oracle office激活 内存 主板 装机 硬件 华为 耳机 权限 chmod 爬虫 nextcloud 英语 电源 ipv6 shadowsocks suid 提权 docker 杂谈 mimikatz 解压 压缩 rar 下载 wpa2 浏览器 劫持 代理 函数 认证绕过 WordPress poc Intel 开源 科学上网 exp phpcms 正则 exploit office 0day Guetzli FileOptimizer 过狗 教程 解密 勒索 sed awk cut grep 密钥 排序 中间人 靶场 FTP 工具 lrzsz 编译 scan nessus find 挖矿 比特币 蠕虫

存档

链接