专栏首页做全栈攻城狮用lazyload.js释放你网站的宽带

用lazyload.js释放你网站的宽带

本教程将使用Visual Studio 2013手把手教你用lazyload.js释放你网站的宽带。本文源码:https://github.com/shellcheng/UsedLazyjs

本文地址:用lazyload.js释放你网站的宽带

本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成。如有转载,请声明出处。

目录

lazyload.js的介绍和优势

如何使用lazyload

lazyload.js的介绍和优势

lazyload.js使用场景:

当一个网页中含有大量图片时,只有所有的图片被加载下来之后,整个页面才会展现出来。往往这个过程是缓慢的。用户需要等待大量的时间,大大增加了用户的跳出率。减少了网站对用户的黏度。

其实对于这个页面来说,用户是从上到下浏览的。而当用户浏览页面的顶部时,我们没有必要也给用户加载底端的图片,只要加载用户可以看到的页面内部的图片就可以了。

所以lazyload.js就是基于这个场景设计的。只加载用户看到的页面的图片。其他的图片先不加载,等到用户看到时,再加载。

如何使用lazyload

第一步:引用jquery(因为jquery.lazyload.js是基于jquery的,所以要先引用jquery,并且放在jquery.lazyload.js的上面)

第二步:引用jquery.lazy.load.js

第三步:写代码使lazy生效

第四步:更改img属性

教程完毕!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 理解BitMap算法的原理

    位图:一种常用的数据结构,代表了有限域中的稠集(dense set),每一个元素至少出现一次,没有其他的数据和元素相关联。在索引,数据压缩,海量数据处理等方面有...

    我是攻城师
  • TFS2018环境搭建一硬件要求

    TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的版本没有操作系统的位数限...

    郑小超.
  • 『高级篇』docker之Mesos集群架构图(23)

    IT故事会
  • python基础类型(一):字符串和列表

    注意到最后三个的单双引号是嵌套使用的,但是最后一个的使用方法是错误的,因为当我们混合使用两种引号时必须有一种用来划分字符串的边界,即在两边的引号不能出现在字符串...

    渔父歌
  • 一些常用的算法技巧总结

    数组的下标是一个隐含的很有用的数组,特别是在统计一些数字,或者判断一些整型数是否出现过的时候。例如,给你一串字母,让你判断这些字母出现的次数时,我们就可以把这些...

    帅地
  • 200行代码,一行行教你自制微信机器人

    1) 用一个windows客户端工具运营公众号,真的很局限。虽然工具的功能很强大,能自动添加好友,自动拉好友入群,关键字回复等等,但是有一个绕不开的点,它是一款...

    用户1634449
  • 迷人又诡异的辛普森悖论:同一个数据集是如何证明两个完全相反的观点的?

    在辛普森悖论中,餐馆可以同时比竞争对手更好或更差,锻炼可以降低和增加疾病的风险,同样的数据集能够用于证明两个完全相反的论点。

    大数据文摘
  • 一张图解释负载均衡

    首先当大量用户访问时候,先请求到nignx服务器,因为nignx对于高并发支持较好,所以由nignx服务器将访问需求分配给不同的apache服务器,apache...

    smy
  • Diss所有深度生成模型,DeepMind说它们真的不知道到底不知道什么

    深度学习在应用层面获得了巨大成功,这些实际应用一般都希望利用判别模型构建条件分布 p(y|x),其中 y 是标签、x 是特征。但这些判别模型无法处理从其他分布中...

    机器之心
  • 多线程:为什么在while循环中加入System.out.println,线程可以停止

    这个我们都知道,由于 stopReqested 的更新值在主内存中,而线程栈中的值不是最新的,所以会一直循环,线程并不能停止。加上 Volatile 关键字后,...

    用户1655470

扫码关注云+社区

领取腾讯云代金券