大家可以看下这个轮播大图怎么优化加载速度，目前来说第一次加载比较慢

Question

网站：www.fineboon.com
html代码：

<div class="adv-content">
            <div class="fullSlide">
                <div class="kvbox">
                <div class="kvcont" style="display: none;"><a><img src="img/01ss.jpg" alt="" class="bgie"></a></div>
                <div class="kvcont" style="display: none;"><a><img src="img/02ss.jpg" alt="" class="bgie" ></a></div>
                <div class="kvcont" style="display: none;"><a><img src="img/03ss.jpg" alt="" class="bgie"></a></div>
                <div class="kvcont" style="display: none;"><a><img src="img/04ss.jpg" alt="" class="bgie"></a></div>
                <div class="kvcont" style="display: block;"><a><img src="img/05ss.jpg" alt="" class="bgie"></a></div>
                </div>
                <div class="kvnav">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
                <a href="#" class="kv_prev"></a>
                <a href="#" class="kv_next"></a>
            </div> 
            <div class="banlink">
                 <a href="javascript:void(0);" target="_blank">我们是如何做到</a>
                 <a href="https://fineboon.tmall.com" target="_blank">如何在线购买</a>
             </div>
             <!-- <a class="arrow-down-top" href="#page2"></a> -->
       </div>

js代码：

$(document).ready(function($) {
  
            //kv init
                var _kvs = 0;
                var _kvlen = $(".kvcont").length;
                    $(".kvcont").eq(0).show();
                $(".kvnav a").eq(0).addClass("current");
                
                $(".kvnav a").click(function(e){
                    e.preventDefault();
                    clearInterval(akv);
                    _kvs = $(this).index();
                    changekv();
                    akv = setInterval(resetindex,5000);
                });
                $(".kv_prev").click(function(e){
                    e.preventDefault();
                    clearInterval(akv);
                    _kvs--;
                    if(_kvs < 0 ){
                        _kvs = _kvlen-1;
                    }
                    changekv();
                    akv = setInterval(resetindex,5000);
                });
                $(".kv_next").click(function(e){
                    e.preventDefault();
                    clearInterval(akv);
                    _kvs++;
                    if(_kvs==_kvlen){
                        _kvs = 0;
                    }
                    changekv();
                    akv = setInterval(resetindex,5000);
                });
                
                function resetindex(){    
                    _kvs++;
                    if(_kvs==_kvlen){
                        _kvs = 0;
                    }
                    changekv();
                }
                function changekv(){
                    $(".kvnav a").eq(_kvs).addClass("current").siblings().removeClass("current");
                    $(".kvcont").eq(_kvs).fadeIn(1000).siblings().fadeOut(1000);
                    var _index = parseInt(_kvs+1);
                }
                akv = setInterval(resetindex,5000);
                
                $(window).resize(function(){
                    resizeKV();
                });
                resizeKV();        
});

Answer 1

第一个方法：
使用lazyload，懒加载的方式；
第二个方法：
1.轮播第一张改用base64加入首页html流，页面加载完毕后，第二屏懒加载，加载完毕后第一屏所有组件、图片加载完毕；
2.延时触发轮播，
3.轮播的第一步是异步加载轮播图片；预加载下一图放入localstorage；
4.第二图加载完毕，触发定时器动画；触发第三图加载放入localstorage；
5.循环；
补充一点：
楼主可以用tinypng把图片压缩一下的啊~~~

楼主可以自行选择~~~

Answer 2

图片太大了。

Answer 3

整个页面加载完用了1min....勾选了img...坐标上海....

图片太大了 不要求那么高的分辨率的话 压缩下

Answer 4

你可以使用纯js方式，动态加载images.具体方法如下：

    “ 
     var images = new Array()  
        function imgLoad() {  
            for (i = 0; i < imgLoad.arguments.length; i++) {  
                images[i] = new Image()  
                images[i].src = imgLoad.arguments[i]  
            }  
        }  
        imgLoad(  
            "img/01ss.jpg",  
            "img/02ss.jpg",  
            "img/03ss.jpg"  
        )   ”