文档章节

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

crazymus
 crazymus
发布于 2014/12/30 20:01
字数 286
阅读 8618
收藏 32

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

插件下载地址:

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左右,非常适合移动端开发。

© 著作权归作者所有

crazymus

crazymus

粉丝 71
博文 80
码字总数 111033
作品 8
武汉
后端工程师
私信 提问
加载中

评论(2)

只是看客而已
只是看客而已

引用来自“落叶公子”的评论

你好 方便看一下你的源码吗? 想看看是什么样的原理
https://github.com/toddmotto/echo 一般js注释上都有出处
落叶公子
你好 方便看一下你的源码吗? 想看看是什么样的原理
移动 Web 开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们...

守候i
2017/09/25
0
0
常见的移动端Web页面问题解决方案

安卓浏览器看背景图片,有些设备会模糊 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网...

冰泪_
2016/08/04
893
0
合格前端系列第七弹-移动端开发踩过的一些坑

前言: 两个月前开始全身心投入到公司的一个移动端项目,框架选型是vue,这篇文章也是在花费两个月的时间,项目一期完成之后得空进行的一片总结性文章,其中包括通用的移动端开发的坑以及vue...

qiangdada
2017/10/24
1K
1
响应式Web设计(四):响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中,涉及到页面的一些需要进行优化的地方: 1、 轻量级的Javascript库: 针对PC端网页当然会首选jQuery来作为前端javascript库,但是针对移动端来...

幸福2胖纸
2013/05/06
4.3K
23
倾力总结40条常见的移动端Web页面问题解决方案

1、安卓浏览器看背景图片,有些设备会模糊 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显...

Mohan710
2018/08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
53分钟前
5
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
4
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
13
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
14
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部