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

boyanx6个月前技术教程18

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

相关文章

C#二次开发BIMFACE系列37 网页集成开发1审图系统中加载模型或图纸

在之前的《C#开发BIMFACE系列》中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程。服务端API测试通过后,需要根据具体业务的需求集成到管理系统中,配合BIMFACE提供的...

webpack 的使用教程

今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点1. 可以把js,css,image,甚至文本当成模块来处理,并通过require的方法来...

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

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

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

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

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

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

基于 layui、xlsx.js 封装的 excel 导出小插件

简介在工作中发现突然对excel导出有点小需求,所以开发了这款小插件。此工具兼容IE10,firfox等主流浏览器。文件读取基于H5的FileReader,导出excel基于XLSX.js(此项目已开...

发表评论    

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