图片懒加载(移动端)
来源:互联网 发布:宿舍管理系统java 编辑:程序博客网 时间:2024/05/22 14:01
在页面上图片比较多的时候,为了优化性能,可以采用延迟加载技术,我封装了一款轻量级的插件。
插件下载地址:
http://pan.baidu.com/s/1o6804Gy
使用方法:
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左右,非常适合移动端开发。
0 0
- 图片懒加载(移动端)
- 移动端图片居多,加载过慢,使用延迟加载|懒加载( lazyload.js)
- 预加载(加载中) + 推荐移动端网页使用的图片懒加载(预加载)插件
- PC端、移动端(手机端)图片懒加载方法整理
- 图片懒加载(滚动加载)原理
- jq 图片延迟加载(懒加载)
- 滚动条移动加载图片--------------瀑布流
- QT加载图片和移动控件
- 移动架构36_图片加载框架
- 移动端懒加载要点分析
- 移动端关于@2x与@3x的图片加载实现方法(基于vue.js+stylus)
- 移动端滑动加载
- 按需加载图片(图片懒加载)
- 按需加载图片(图片懒加载)
- 图片懒加载(初始)
- 移动端 图片自适应
- 移动端图片自适应
- 移动端关于@2x与@3x的图片加载问题解决方法
- NYOJ - 119 - 士兵杀敌(三) ( RMQ问题 )
- 编程常用书籍追踪列表
- Qt在Mac OSX下的系统菜单添加
- android listview子控件点击事件(点赞,收藏功能)
- ArcGIS自定义坐标变换中的方法说明
- 图片懒加载(移动端)
- Tomcat SSL / TLS (HTTPS) 配置
- JSON Web Token - 在Web应用间安全地传递信息
- php之摘录
- 去耦电容
- 张小龙首次全面阐述小程序
- 杭电2030
- 阿里云专家讲座-Docker
- web前端之精通dojo三:载入Dojo