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

boyanx6个月前技术教程19

本教程将使用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属性

教程完毕!!

标签: jquery loading

相关文章

前端面试:异步加载和延迟加载的理解?

回答:异步加载和延迟加载是前端优化网站性能的两种方法。异步加载的方案: 动态插入script标签通过ajax去获取js代码,然后通过eval执行script标签上添加defer或者async属性创建并...

Bootstrap5 响应式布局:移动端适配终极方案

你的网页在手机上又双叒叕变形了?老板拍桌要求三天搞定移动端?别慌,Bootstrap5的响应式魔法正在待命!移动端流量早已超越桌面端,但你的网站还在用“缩小版”应付手机用户?研究表明,53%的用户会因...

伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件

开发环境:citymaker 7(以下简称cm),jquery,easyui 1.4(界面),visual studio 2012(没有vs,部署到IIS也行,html在本地目录双击打开可用)以下演示...

资源分享:炫酷的css3动画加载框架Loaders

页面加载动画在web应用中必不可少,加载动画效果也各有千秋。在web页面ajax请求,单页面应用页面切换时好的加载动画会让浏览者赏心悦目忘记加载的耗费时间,一个性能好的页面,必须有loading预加载...

Jquery加载本地文件出现跨域错误的解决方案

禁止跨域是浏览器的安全限制机制,会报告上述错误。但是可以通过设置来绕过这个限制(如果经常调试前端代码,可以在本机装个web容器)。常见的方式:右击chrome快捷方式,选择“属性”,在“快捷方式”下的...

DevExpress Demo示例展示:多功能站点插件

DevExpress ASP.NET MVC中有一个多功能扩展集合,包括RatingControl, the Round Panel,Callback Panel (通过callbacks自动更新内容...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。