网站: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();
});
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
第一个方法:
使用lazyload,懒加载的方式;
第二个方法:
1.轮播第一张改用base64加入首页html流,页面加载完毕后,第二屏懒加载,加载完毕后第一屏所有组件、图片加载完毕;
2.延时触发轮播,
3.轮播的第一步是异步加载轮播图片;预加载下一图放入localstorage;
4.第二图加载完毕,触发定时器动画;触发第三图加载放入localstorage;
5.循环;
补充一点:
楼主可以用tinypng把图片压缩一下的啊~~~
楼主可以自行选择~~~
图片太大了。
整个页面加载完用了1min....勾选了img...坐标上海....

图片太大了 不要求那么高的分辨率的话 压缩下
你可以使用纯js方式,动态加载images.具体方法如下: