javascript - 大家可以看下这个轮播大图怎么优化加载速度,目前来说第一次加载比较慢
怪我咯
怪我咯 2017-04-11 13:14:35
[JavaScript讨论组]

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

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();        
});
怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(4)
PHPz

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

楼主可以自行选择~~~

PHP中文网

图片太大了。

高洛峰

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

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

天蓬老师

你可以使用纯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"  
        )   ”
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号