关于图片延迟加载的解决方案（针对移动端）

转自:http://my.oschina.net/crazymus/blog/362451?fromerr=L1i2mEW2

在页面上图片比较多的时候，为了优化性能，可以采用延迟加载技术，我封装了一款轻量级的插件。

插件下载地址：

http://pan.baidu.com/s/1c8ziMi

使用方法：

1 在页面中需要引入echo.css和echo.min.js

2 对需要进行延迟加载的图片采用如下写法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" />

blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。

data-echo指向的是真正的图片地址。

3 对插件进行初始化：

echo.init();

就这么简单，你将可以看到图片只有出现在视野内时才会加载，减少了页面的渲染工作量。

说明：

我们知道，jQuery lazyloading插件已经能很好地实现这一功能，但它基于jQuery，对于移动端可能不太实用，这款插件不依赖任何第三方库，核心文件只有3KB左右，非常适合移动端开发。

转载于:https://www.cnblogs.com/mauricechans/p/5467176.html

关于图片延迟加载的解决方案（针对移动端）相关推荐

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
android SQLite 批量插入数据慢的解决方案 (针对于不同的android api 版本)
android SQLite 批量插入数据慢的解决方案 (针对于不同的android api 版本) 参考文章: (1)android SQLite 批量插入数据慢的解决方案 (针对于不同的andro ...
拒绝图片延迟加载，爽爽的看美图
有一天我一个朋友访问一个XX图片网站--每个人背后总有几个背黑锅的"朋友",好吧,我承认那个"朋友"其实是我自己,你能把我怎么的? 这个网站用的是Discuz ...
jquery图片延迟加载 lazy-src
http://tanglangrong2010.blog.163.com/blog/static/174796716201211282555345/ 目前,主要的购物网站都采用了这种加载方式.今天在一 ...
Android大图片裁剪终极解决方案原理分析
约几个月前,我正为公司的APP在Android手机上实现拍照截图而烦恼不已. 上网搜索,确实有不少的例子,大多都是抄来抄去,而且水平多半处于demo的样子,可以用来讲解知识点,但是一碰到实际项目,就漏 ...
ImagesLazyLoad 图片延迟加载效果
之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完,而且大图的位置是在大量的小图后面,导致大图要等到小图都加载完才能显示,为了解决这个问题,就想到了Lazyload效果. 现在很多网站都用 ...
jQuery图片延迟加载插件jQuery.lazyload
查看演示 website 立即下载插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方 ...

关于图片延迟加载的解决方案（针对移动端）

关于图片延迟加载的解决方案（针对移动端）相关推荐

最新文章

热门文章