cmp.imgCache 类

图片懒加载组件（根据配置，适配普通图片懒加载和v5图片懒加载）

注：该组件需要配合html的标签

定义于: doc\doc\cmp_doc_all\cmp-imgCache-doc.js:20
模块: imgCache

构造函数

cmp.imgCache

cmp.imgCache
(
  • container
  • options
)

定义于 doc\doc\cmp_doc_all\cmp-imgCache-doc.js:20

参数:

名称类型标识描述
container String 必选

懒加载图容器的id或class

options Object 必选

配置参数

名称类型标识描述
type Number 必选

图片资源类型

  • 1:任何图片
  • 2:，v5格式的人员头像图片）

imgCache Boolean 必选

是否启用将图片保存到手机本地(默认true)

offset Object 必选

图片检测范围，其中

  • x:屏幕的x坐标(默认：0，即屏幕最左边)
  • y:屏幕的y坐标(默认：0，即屏幕最上边)
    注：弹层情况的范围检测，由于弹层一般是从底部或者从右边弹出来，那么，x，y需要设置成弹层未弹出来时的坐标位置，不能是transForm后的坐标

返回值:

图片懒加载对象，返回inspect方法，用于动态加载的html的图片懒加载检测

示例:

<html>
<body class="cmp-fullscreen">
<header class="cmp-bar cmp-bar-nav">
    <a id="backIndex" class="cmp-action-back cmp-icon cmp-icon-left-nav cmp-pull-left"></a>
    <h1 id="title" class="cmp-title">listview中图片懒加载（图片缓存）</h1>
</header>

<div class="cmp-content">
    <div class="cmp-control-content cmp-active">
        <div id="scrollContainer" class="  cmp-scroll-wrapper">
            <div class="cmp-scroll">
                <div class="cmp-content-padded">
                    <img class="cmp-img-cache" src="../../img/file.png" cmp-data="http://img.ptcms.csdn.net/article/201510/21/5627595d5ef87.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://img5.cache.netease.com/cnews/2015/11/19/20151119105132bc715_550.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://img3.cache.netease.com/cnews/2015/11/19/20151119105134122b2_550.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://img4.cache.netease.com/cnews/2015/11/19/201511191107057f36a.jpg"
                         width="20" height="20"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://img3.cache.netease.com/cnews/2015/11/19/20151119105136495aa.jpg"
                         width="20" height="20"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png" cmp-data="//www.baidu.com/img/bd_logo1.png"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://f1.p0y.cn/c/22/371734.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://k.sinaimg.cn/n/default/crawl/20151125/caKO-fxkwuzu0664796.jpg/w120h90z1l50t113b.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://k.sinaimg.cn/n/default/transform/20151125/Guzf-fxkwuzu0675316.jpg/w120h90z1l50t1a7a.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://k.sinaimg.cn/n/default/transform/20151125/v-Hx-fxkwvap1690830.png/w120h90z1l50t19ae.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png" cmp-data="http://k.sinaimg.cn/n/default/20151125/xjRj-fxkwvcp2984795.jpg/w120h90z1l50t1a28.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://k.sinaimg.cn/n/default/transform/20151125/rN8H-fxkwvcp2988497.jpg/w120h90z1l50t1afe.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>
                    <img class="cmp-img-cache" src="../../img/file.png"
                         cmp-data="http://k.sinaimg.cn/n/default/transform/20151125/DMpA-fxkwvcp2996606.jpg/w120h90z1l50t1c7e.jpg"
                         width="100" height="100"/>
                    <div>这晒黑到静安寺得到</div>

                </div>
            </div>
        </div>
    </div>

</div>


<script>
    /**
     * 说明：
     * 1、本例的容器是listview容器，没有加载listview的情况，在实例化listview的时候需要在配置listview实例时将imgCache属性置为true传入如
     *      cmp.listView("#iiii",{
                        imgCache:true, //需要该属性
                        imgCacheType:1 //图片懒加载的(1,任意图片加载，2，v5人员头像数据格式图片加载)
                });
     * 3、html写法需要将真实的图片地址以cmp-data的形式设置在dom上，并添加classname名为：cmp-img-cache，可根据开发者需要接受一个占位符图片或div：具体如下
     *      （1）：占位图片：<img class="cmp-img-cache" src="开发者自定义的一个本地默认图片地址" cmp-data="该图片的真实地址">
     *      （2）：占位div：<div class="cmp-img-cache" cmp-data="该图片的真实地址" style="width:100px;height:100px;boder:1px soild;background:#fff"></div>
     *      （3）：如果是在v5的环境下cmp-data设置成人员的ID即可，组件会对根据人员id拼接其图片下载地址
     * 4、cmp.IMG.detect();//组件提供该方法，调用该方法及进行扫描检查（当页面不是滚动结束后再进行图片加载，而是开发者手动检测是否需要在页面的位置进行图片懒加载）
     */
    scrollDownload = true;
</script>

<script>
    cmp.ready(function(){
        cmp.listView("#scrollContainer",{
            imgCache:true,
            imgCacheType:1
        });
    });
</script>
</body>
</html>
Top