尝试使用缩略图构建图库。
您点击缩略图,主要的图片容器将显示它。
似乎当我更改容器的URL时,它总是从互联网重新加载图像而不是缓存它。
我尝试了2种方法,但两种方法的结果都相同。
第一种方法:
//save to cache right when script is loaded
var cacheImages =[];
preloadimgs();
function preloadimgs(){
for(var k=0;k<5;k++) {
var img = new Image();
img.src = currentStore.product.media.photos[k];
cacheImages.push(img);
}
}
//load
function thumb(arg){
var prvimgShow = cacheImages[arg].src;
var finalurl="url("+prvimgShow+")";
$("#preview").stop().animate({opacity: 0.7},100,function(){
$(this).css({'background-image': finalurl})
.animate({opacity: 1},{duration:200});
});
}
当我点击缩略图时,这将导致该照片重新加载非常缓慢。
第二条(我已经在这里提出了问题): 在这里,我从缩略图背景中获取照片作为源:
//get a thumb's background photo
var prvimgShow = document.getElementById("thumb0").style.backgroundImage;
//show it
$('#thumb0').on('click', () => {
$("#preview").stop().animate({
opacity: 0.7
}, 100, function() {
$(this).css({
'background-image': prvimgShow
})
.animate({
opacity: 1
}, {
duration: 200
});
});
})
两种方式都会导致图片重新加载,需要耗费2秒钟的时间。
这些图片非常小(300k),对于相册来说这是不好的用户体验。