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

boyanx1个月前技术教程5

本教程将使用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提供的...

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

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

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

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

小技巧,如何使用 webpack 降低前端资源文件维护成本

前言前端现在开发某个常见功能,直接会在 npm 找到合适的包,这些包存在于 node_modules 目录下。如何减少包体积,用下 CDN 加速,或者这个模块只有 script 标签导入方式时,直接从...

性能出色,纯CSS实现的loading动画——Loaders.css

介绍loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。下面这张...

前端图片延迟加载详细讲解

原文链接:http://www.gbtags.com/gb/share/6366.htm? 原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的,没想到下午公司项目出现了一些问题...

发表评论    

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