5***@qq.com
5***@qq.com
  • 发布:2016-08-01 10:18
  • 更新:2016-08-01 10:18
  • 阅读:1346

静态数据图片延时加载问题

分类:MUI

<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打开测试正常,微信第一次打开也是正常返回后再次打开问题如上。

2016-08-01 10:18 负责人:无 分享
已邀请:

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