[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技术 ...
随机推荐
- 提高c++性能的编程技术笔记
需要时再创建对象,比如在类中用if new 而不是在构造函数里创建类的成员. 用char 指针而不是string可以节省构造和析构string的开销. 虚函数无法内联的性能损失.
- 『WPF』实现拖动文件到窗体(控件)
前言 实现从窗口外部拖文件到窗口内部并自动捕获文件地址. 第一步 开启属性 启用底层Window的AllowDrop属性,添加Drop事件. Drop事件:当你拖动文件到对应控件后,松开触发. 除Dr ...
- JIRA数据库切换(HSQL Database到MySQL)
没试过的版本,但是看着靠谱: 注:如果你之前配置过hsql版本,这次修改mysql数据操作会导致配置数据丢失,所以请注意备份 一. 创建名为jiradb的mysql数据,编码格式为utf-8 二.修改 ...
- Code the Tree(图论,树)
ZOJ Problem Set - 1097 Code the Tree Time Limit: 2 Seconds Memory Limit: 65536 KB A tree (i.e. ...
- Android中使用自身携带的Junit新建一个测试工程
1.新建立一个Android工程 package com.shellway.junit; public class Service { public int divide(int a,int b){ ...
- 【NS2仿真】TCP协议
# # ftp # \ # tcp sink # \ / # n0--------5M 2ms---------n1 # # set ns [new Simulator] set f [open ou ...
- maven中文乱码问题——打包错误
工程采用GBK编码, web应用中的配置文件打包后,war包里的配置文件里的中文成乱码. 用notepad++打开后,可以看到是用utf-8格式的(可以通过菜单中的[格式]查看),也就是说,在经过 ...
- mvc4.0添加EF4.0时发生编译时错误
解决此问题是因为MVC4.0默认未添加EF4.0的引用,EF4.0引用的是System.Data.Entity.dll, Version=4.0.0.0, 解决办法: 在web.config文件sys ...
- 【HTML】Iframe中的onload事件
当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index" ...
- 玩转PowerShell第二节——【利用PsExec进行远程调用】-技术&分享
概述 PowerShell用的最多的地方就是远程调用,在远程机器上执行脚本,监控远程机器的状态,如NLB状态,EventLog,SqlServer DataBase状态等. 本篇将讲到用PsExec. ...