使用echo.js异步加载图片（懒加载）

周枫

本帖最后由周枫于 2016-6-3 13:44 编辑

手机端异步加载图片的重要性我就不说了，今天说一个我个人的实现方式
第三方控件：echo.min.js，我用的版本在附件中下载

2016.06.03发布《使用echo.js异步加载图片并缓存图片到本地》

代码如下
1. 页面引入js文件

<script type="text/javascript" src="../../script/echo.min.js"></script>

复制代码

2. 页面图片需要异步加载的地方修改如下:
onerror：如果图片加载错误，显示默认图片，防止出现空白区域不美观
src：同onerror，默认图片
data-echo：图片真实路径

<img class="aui-img-object" onerror="this.src='../../image/yingyong/weike/wk_default.png'" src="../../image/yingyong/weike/wk_default.png" alt="" data-echo="<%=list[i].wk_thumb_url %>">

复制代码

3. 统一配置方法common.js中添加通用方法：

/**
* 延迟加载
* 周枫
* 2015.12.22
*/
function echoInit() {
echo.init({
offset : 0,
throttle : 0 //设置图片延迟加载的时间
});
}

复制代码

4. 页面需要加载异步的时候，调用通用方法：

echoInit();

复制代码

周枫

搜农发表于 2016-3-11 09:10
页面需要加载异步的时候，调用通用方法： echoInit();是什么时候呢？我的代码是这样写的：先查询出来然 ...

我的摆放位置，实在template模板加载完之后调用
var html_type = template.render('wklist_script', ret);
if (currentPage == 1) {
document.getElementById('wklist_div').innerHTML = html_type;
} else {
$api.append($api.byId('wklist_div'), html_type);
}
//延迟加载图片
setTimeout(function() {
echoInit();
}, 300);
//通知顶部下拉刷新数据加载完毕，组件会恢复到默认状态
api.refreshHeaderLoadDone();
api.hideProgress();

YonBIP社区

感谢分享

tcld2269

感谢分享，收藏备用

搜农

纯技术不错

搜农

页面需要加载异步的时候，调用通用方法： echoInit();是什么时候呢？我的代码是这样写的：先查询出来然后存成一个数组然后最后显示全部数组这样页面打开的有点慢然后如果想异步我不知道该放在哪个位置？

LeisureZjj

请问，你的图片容器有固定长宽么？APP中默认加载图片只用一张么？

周枫

LeisureZjj 发表于 2016-3-15 09:44
请问，你的图片容器有固定长宽么？APP中默认加载图片只用一张么？

不是一张，根据需要有不同比例的图片

LeisureZjj

周枫发表于 2016-3-15 10:46
不是一张，根据需要有不同比例的图片

如果这样，你的图片容器应该只固定一边吧，另一边根据图片比例自动伸缩？另外太多不同比例的默认图片，会不会占太多空间呢？

周枫

LeisureZjj 发表于 2016-3-15 13:47
如果这样，你的图片容器应该只固定一边吧，另一边根据图片比例自动伸缩？另外太多不同比例的默认图片，会 ...

前半句没理解上去...
后半句你可以根据自己的业务确定，比如说，头像有头像的默认图片，文章有文章的默认图片，视频有视频的默认图片，如果业务相同，可以采用一个，css控制一下，自动缩放，只有保持一定比例不变形就可以，图片压缩处理后就几KB，可以接受的大小