我在父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>
0 个回复