vision
vision
  • 发布:2016-10-18 19:28
  • 更新:2016-10-18 19:28
  • 阅读:1922

下拉刷新组件和图片懒加载,导致页面需要进行懒加载的图片无法显示

分类:MUI

使用下拉刷新组件和图片懒加载,导致页面需要进行懒加载的图片无法显示

<!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">  

    <!--标准mui.css-->  
    <link rel="stylesheet" href="../../resources/css/mui.min.css">  
    <!--icons-extra.css-->  
    <link rel="stylesheet" type="text/css" href="../../resources/css/icons-extra.css" />  
    <!--App自定义的css-->  
    <link rel="stylesheet" type="text/css" href="../../resources/css/app.css"/>  
    <style>  
        .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{  
            font-size: 16px;  
            margin-top:8px;  
            color: #333;  
        }  
        .mui-content .mui-card{  
            margin-top: 15px;  
            border-radius: 15px;  
        }  
        .mui-content .mui-card:first-child{  
            margin-top: 10px;  
        }  
        .mui-card{  
            margin:0px;  
        }  
        /*.mui-scroll-wrapper{  
            position:inherit;  
            overflow: auto;  
        }  
        .mui-scroll-wrapper .mui-scroll{  
            position:inherit;  
        }*/  
    </style>  
</head>  
<body>  
    <div class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <div class="mui-card">  
                <div class="mui-card-header">  
                    <a class="mui-icon-extra mui-icon-extra-rank mui-pull-left" style="color:#FF9900">  
                    </a>  
                    <span>  
                        排行榜  
                    </span>  
                    <a class="mui-icon mui-icon-arrowright mui-pull-right"></a>  
                </div>  
                <div class="mui-card-content">  
                    <ul class="mui-table-view mui-grid-view">  
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                            <a href="#">  
                                <img class="mui-media-object" src="../../resources/images/shuijiao.jpg">  
                                <div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>  
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                            <a href="#">  
                                <img class="mui-media-object" src="../../resources/images/muwu.jpg">  
                                <div class="mui-media-body">想要一间这样的木屋,静静的喝咖啡</div></a></li>  
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                            <a href="#"><img class="mui-media-object" src="../../resources/images/cbd.jpg">  
                                <div class="mui-media-body">Color of SIP CBD</div></a></li>  
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">  
                            <a href="#">  
                                <img class="mui-media-object" src="../../resources/images/yuantiao.jpg">  
                                <div class="mui-media-body">静静看这世界</div></a></li>  
                    </ul>  
                </div>  
            </div>  

            <div class="mui-card">  
                <div class="mui-card-header">  
                    <a class="mui-icon-extra mui-icon-extra-dictionary mui-pull-left" style="color:#FF9900">  
                    </a>  
                    <span>  
                        图文  
                    </span>  
                    <a class="mui-icon mui-icon-arrowright mui-pull-right"></a>  
                </div>  
                <div class="mui-card-content">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="../../resources/images/shuijiao.jpg">  
                                <div class="mui-media-body">  
                                    幸福  
                                    <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="../../resources/images/muwu.jpg">  
                                <div class="mui-media-body">  
                                        木屋  
                                    <p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="../../resources/images/yuantiao.jpg">  
                                <div class="mui-media-body">  
                                    CBD  
                                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/3.jpg">  
                                <div class="mui-media-body">  
                                    CBD11  
                                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/4.jpg">  
                                <div class="mui-media-body">  
                                    CBD  
                                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/3.jpg">  
                                <div class="mui-media-body">  
                                    CBD  
                                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/2.jpg">  
                                <div class="mui-media-body">  
                                    CBD  
                                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                                </div>  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media">  
                            <a href="javascript:;">  
                                <img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/1.jpg">  
                                <div class="mui-media-body">  
                                    CBD  
                                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>  
                                </div>  
                            </a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
    </div>  
</body>  
<script src="../../resources/js/mui.min.js"></script>  
<script src="../../resources/js/mui.lazyload.js"></script>  
<script src="../../resources/js/mui.lazyload.img.js"></script>  
<script>  
    mui.init();  
    (function($) {  
        //图片懒加载  
        $(document).imageLazyload({  
            placeholder: '../../resources/images/60x60.gif'  
        });  
    })(mui);  
</script>  

</html>

2016-10-18 19:28 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复