fin
fin
  • 发布:2016-02-01 05:51
  • 更新:2016-02-01 05:51
  • 阅读:3000

求教懒加载+webview选项卡的几个问题

分类:MUI

我在父html是一个webview模式的选项卡,在第一个webwiew页面放了一个左侧选项卡(list1)。 然后在list1中的右边内容换成了懒加载,出现了一下几个问题:
1:懒加载的图片加载慢(很慢很慢);
2:懒加载换掉图片地址之后再电脑浏览器就不能加载图片了;
3:顺便问下在电脑浏览器上webview选项卡加载不出来子webview页面是怎么回事!
我不知道是不是我改的时候出了问题还是怎么回事。
求教


<div class="mui-content mui-row mui-fullscreen">  
            <div class="mui-col-xs-3">  
                <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">  
                </div>  
            </div>  
            <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">  
                <div id="item1" class="mui-control-content mui-active">  
                </div>  
                <div id="item2" class="mui-control-content">  
                </div>  
                <div id="item3" class="mui-control-content">  
                </div>  
            </div>  
        </div>  

<script>  
            mui.init({  
                swipeBack: true //启用右滑关闭功能  
            });  
            var controls = document.getElementById("segmentedControls");  
            var contents = document.getElementById("segmentedControlContents");  
            var html = [];  
            var i = 1,  
                j = 1,  
                m = 16, //左侧选项卡数量 1  
                n = 20; //每个选项卡列表数量 1  
            for (; i < m; i  ) {  
                html.push('<a class="mui-control-item" id="aLabel" href="#content'   i   '">选项'   i   '</a>');  
            }  
            controls.innerHTML = html.join('');  
            html = [];  
            for (i = 1; i < m; i  ) {  

                html.push('<div id="content'   i   '" class="mui-control-content"><ul id="list'   i   '" class="mui-table-view mui-table-view-chevron"></ul></div>');  
            }             
            contents.innerHTML = html.join('');  
             //默认选中第一个  
            controls.querySelector('.mui-control-item').classList.add('mui-active');  
            contents.querySelector('.mui-control-content').classList.add('mui-active');  
        </script>  
    </body>  

    <script type="text/javascript" src="js/mui.lazyload.js" ></script>  
    <script type="text/javascript" src="js/mui.lazyload.img.js" ></script>  
    <script>  
        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 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;  
        };  

        (function($) {  
            var list = document.getElementById("list1");  
            list.appendChild(createFragment(20));  
            $(document).imageLazyload({  
                placeholder: 'images/60x60.gif'  
            });  
        })(mui);  

    </script>  
2016-02-01 05:51 负责人:无 分享
已邀请:

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