[js开源组件开发]图片懒加载lazyload
图片懒加载lazyload
前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型。它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷。所以建议src里放置模糊小图或正在加载中的图,不要置空为好。
lazy-load
使用方法案例:
<img data-src="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.jpg" alt="">
$('img').LazyLoad({
container: window,
event:'scroll',
effect: 'show',
effectArgs: 'slow',
loadImg:'loading.gif',
load: null,
offset: 0
});
或者
var obj = new LazyLoad();
obj.init({
elements:'img',
container: window,
effect: 'show',
event:'scroll',
effectArgs: 'slow',
loadImg:'loading.gif',
load: null,
offset:
});
属性和方法
elements:
dom的集合,一般为需要懒加载的img标签集合,如果是动态加载的内容,请在html加载完成之后再调用init
init:
初始化方法
container: window
触发滚动条的容器,默认为window,可不传
event:
容器触发事件,默认为scroll
effect:
触发的事件方法,默认为 show
effectArgs
要给effect传的参数,可不传
loadImg
加载等待时显示的图片地址,默认是一个1pxx1px的图
offset:
与图片的差值,默认0
load:function(img)
加载完成的回调,this指向当前对象
[js开源组件开发]图片懒加载lazyload的更多相关文章
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- 图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
随机推荐
- List的遍历和删除元素
package test; import java.util.ArrayList; import java.util.Iterator; import java.util.List; public c ...
- UIWebView 操作
网络开发中,当公司已经使用 HTML5 技术实现同时适应 Android 和 iOS 等多个平台的网页时,这时往往需要我们 iOS 平台能够嵌入网页并进行各种交互,那我们应该怎么做来实现这种需求呢? ...
- PS1--cannot be loaded because the execution of scripts is disabled on this system
在nagiosXI上,通过nsclient++ 引用plugin “check_ms_win_disk_load”(https://outsideit.net/check-ms-win-disk-lo ...
- Unix sed实用教程系列目录[已完成]
本系列文章已经译完了,译自awk-sed@theunixschool,收获颇丰,作者没有讲明白的我做了补充,并且尝试讲的更清楚,整理成系列索引,方便学习,开篇非译文,是我为了方便后面的理解写的一篇,感 ...
- Legolas工业自动化平台案例 —— 水源地自动化监控系统
天津港爆炸事件后,除了安置群众.追究事故责任外,人们最关心的莫过于爆炸污染物对于周边环境的影响,其中最重要的一块就是饮用水的安全.所幸的是,水源的安全监测是实实在在有据可依的.环保单位和供水企业在建设 ...
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- (转) 寄存器、RAM、ROM、Flash相关概念区别整理
转自 http://m.blog.chinaunix.net/uid-30077524-id-5570244.html 文章对这几个东西讲得很清楚,值得收藏. 寄存器 寄存器是中央处理器内的组成部份. ...
- SharePoint 2013 搜索爬网功能
最近在政府部门介绍SharePoint 2013 新功能,我也准备了很多,比如SharePoint 2013的Search.以后有机会谈谈Office Web App,Workflow等. Share ...
- 基于openssl的单向和双向认证
1.前言 最近工作涉及到https,需要修改nginx的openssl模块,引入keyless方案.关于keyless可以参考CloudFlare的官方博客: https://blog.cloudfl ...
- 面向对象的JavaScript(2):类
在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScript ...