<div class="mui-scroll-wrapper Pdding_bottom" id="ScoolTop">
<div class="mui-scroll">
<div class="mui-content">
<div id="slider" class="mui-slider">
</div>
<!--分格布局-->
<ul id="cat" class="mui-table-view mui-grid-view List_Img">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="Local_product.html">
<p class="Col_yellow">土特产</p>
<img class="mui-media-object" data-lazyload="http://image.dxoo.cn/upload/user_8/images/2016/2/17/7d2143668a5eda289521e12cc83ca8bd.jpg">
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6" style="margin-right: -1px;">
<a href="Ticket_add.html">
<p class="Col_orange">古城维护费</p>
<img class="mui-media-object" data-lazyload="http://image.dxoo.cn/upload/user_8/images/2016/2/17/94e6a104a9cc5b2e988c31f76b25a962.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
var lazyLoadApiSlide = mui('#slider').imageLazyload({
autoDestroy: false,
placeholder: 'images/tttx_h.png'
});
var lazyLoadApiCat = mui('#cat').imageLazyload({
autoDestroy: false,
placeholder: 'images/tttx_h.png'
});
var slider = document.getElementById('slider');
mui.getJSON('json/nav.json', function(data) {
var sliderGroup = document.createElement("div");
sliderGroup.className = "mui-slider-group mui-slider-loop";
//alert(data.data);
//额外增加的一个节点(循环轮播:第一个节点是最后一张轮播)
var group = '<div class="mui-slider-item mui-slider-item-duplicate">' +
'<a href="#">' + '<img data-lazyload="' + data.data[data.data.length - 1].img + '">' + '</a>' + '</div>';
for(var i = 0; i < data.data.length; i++) {
//循环轮播图
group += '<div class="mui-slider-item">' +
'<a href="#">' +
'<img data-lazyload="' + data.data[i].img + '">' +
'</a>' +
'</div>';
}
//额外增加的一个节点(循环轮播:最后一个节点是第一张轮播)
group += '<div class="mui-slider-item mui-slider-item-duplicate">' +
'<a href="#">' +
'<img data-lazyload="' + data.data[0].img + '">' +
'</a>' +
'</div>';
sliderGroup.innerHTML = group;
// 圆点
var sliderIndicator = document.createElement("div");
sliderIndicator.className = "mui-slider-indicator";
for(var i = 0; i < data.data.length; i++) {
var item = document.createElement("div");
item.className = "mui-indicator";
if(i == 0) {
item.classList.add('mui-active');
}
sliderIndicator.appendChild(item);
}
slider.appendChild(sliderGroup);
slider.appendChild(sliderIndicator);
lazyLoadApiSlide.refresh(true);
mui("#slider").slider({
interval: 5000
});
});
做的一个动态数据和静态数据的图片延时加载,页面第一次打开和点击浏览器重新加载按钮效果正常。浏览器用的谷歌,但是回车地址栏加载页面动态数据的图片效果正常,静态数据的图片显示的placeholder: 'images/tttx_h.png'的图片。qq打开测试正常,微信第一次打开也是正常返回后再次打开问题如上。