图片懒加载问题

下个版本会修复此问题。另外使用的时候需要注意一些细节。
如果你想提前使用的话。可以私信我，我先把修改后的mui.lazyload.js和mui.lazyload.img.js发给你测试一下
以下是一个完整示例：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
        </style>  
    </head>  

    <body>  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <ul id="list" class="mui-table-view mui-table-view-chevron">  

                </ul>  
            </div>  
        </div>  
    </body>  
    <script src="../js/mui.min.js "></script>  
    <script src="../js/mui.lazyload.js"></script>  
    <script src="../js/mui.lazyload.img.js"></script>  
    <script>  
        var list = document.getElementById("list");  
        var lazyLoadApi = mui('#pullrefresh .mui-scroll').imageLazyload({  
            autoDestroy: false,  
            placeholder: '../images/60x60.gif'  
        });  
        mui.init({  
            pullRefresh: {  
                container: '#pullrefresh',  
                down: {  
                    callback: function() {  
                        setTimeout(function() {  
                            var elements = createFragment(50);  
                            list.insertBefore(elements, list.firstElementChild);  
                            lazyLoadApi.refresh(true);  
                            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                        }, 2000);  
                    }  
                },  
                up: {  
                    auto: true,  
                    callback: function() {  
                        setTimeout(function() {  
                            var elements = createFragment(50);  
                            list.appendChild(elements);  
                            lazyLoadApi.refresh(true);  
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //refresh completed  
                        }, 2000);  
                    }  
                }  
            }  
        });  
        var createFragment = function(count) {  
            var fragment = document.createDocumentFragment();  
            var li;  
            for (var i = 0; i < count; i++) {  
                li = document.createElement('li');  
                li.className = 'mui-table-view-cell mui-media';  
                li.innerHTML = '<a class="mui-navigate-right"><img id="img_' + i + '" class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';  
                fragment.appendChild(li);  
            }  
            return fragment;  
        };  
    </script>  

</html>

wenju

亲 autoDestroy为什么在这里设置成false呢??如果设置成true会是什么效果

2015-08-05 10:49
DCloud_UNI_FXY

回复 wenju:当页面上已有的图片全都加载完后，会自动destory掉图片懒加载，这样你再有新的图片进来，不会再懒加载

2015-08-05 15:03
wenju

回复 DCloud_UNI_FXY:我想问问,我的列表是像朋友圈一样的,使用懒加载,有的图片就会拉伸,因为用户上传的照片都不是正方形的呢, 如果只显示一部分,比如取中间,像微信朋友圈的图一样

2015-09-07 09:49
信不过你开车 (作者)

回复 wenju:你吧图片作为div的背景显示，懒加载的img弄成全透明覆盖在div上

2016-01-04 09:47
mia酱

lazyLoadApi.refresh(true);这个是修复后的版本新增的函数？现在的案例是修复前的还是修复后的？

2016-01-11 21:36
LewisXu

有个疑问，如果有多页千时，分tab下拉刷新与延迟加载有冲突、position属性去掉才可以，但是会引发别的问题。我现在需要多tab下拉刷新和懒加载同时使用。有没有例子

2016-01-14 20:10
LewisXu

比较急求个例子

2016-01-14 20:11
DCloud_UNI_FXY

回复 LewisXu:既然有下拉刷新，没必要再懒加载吧。。你一次加载的数据很多吗？

2016-01-14 21:07
阿东

在iOS中，只有当页面往上滑动才加载出图片，屏幕当中的还是空白这个问题有解决了没怎么我现在还是遇到这个问题了？？

2016-01-20 19:41

welly

不错，按大神写的已经实现。感谢。

慕鱼君羡

在不在~我可以跟你请教问题吗~qq：1679101271

2016-02-26 11:47

DCloud_UNI_FXY

你的内容是动态生成的？

如果是动态生成的。那需要在动态生成后，再初始化lazyload。
目前lazyload仅在初始化的时候读取已有的图片进行延迟加载。

信不过你开车 (作者)

function pullupRefresh() {

//懒加载图片

(function($) {

var list = document.getElementById("content");

list.appendChild(createFragment(2));

$(document).imageLazyload({

placeholder: '../../img/home/60x60.gif',

});

setTimeout(function() {

mui('#pullrefresh').pullRefresh().endPullupToRefresh();

}, 1000);

})(mui);

};

我是这样写的初始化了呢、、、、、、对么？？？

2015-05-20 09:02