Question

如果我在我的CSS中定义了这样的图像：

@media only screen and (min-width: 480px) {

/* ==========================
Responsive Image handler
========================== */   
.slide1 {background-image: url(../img/rect-img/slide1-small.jpg);}  
.slide2 {background-image: url(../img/rect-img/slide2-1-small.jpg);}    
.slide4 {background-image: url(../img/rect-img/slide2-2-small.jpg);}    
.slide5 {background-image: url(../img/rect-img/slide2-3-small.jpg);}    
.slide6 {background-image: url(../img/rect-img/slide2-4-small.jpg);}    
.slide7 {background-image: url(../img/rect-img/slide2-5-small.jpg);}    
.slide8 {background-image: url(../img/rect-img/slide2-6-small.jpg);}    
.slide9 {background-image: url(../img/rect-img/slide2-7-small.jpg);}    
.slide10 {background-image: url(../img/rect-img/slide2-8-small.jpg);}   
.slide11 {background-image: url(../img/rect-img/slide2-9-small.jpg);}   
.slide12 {background-image: url(../img/rect-img/slide2-10-small.jpg);}  
.slide3 {background-image: url(../img/rect-img/slide3-1-small.jpg);}
.slide13 {background-image: url(../img/rect-img/slide3-1-small.jpg);}
.slide14 {background-image: url(../img/rect-img/slide3-1-small.jpg);}
.slide15 {background-image: url(../img/rect-img/slide3-1-small.jpg);}
}

我在JQuery上创建了一个预先缓存的代码，但现在我正在这样做，我现在不知道或者不明白哪个会首先加载。这是代码： $（document）.ready（function（）{

var imageArray = [
    [
        'img/rect-img/slide2-1-small.jpg',
        'img/rect-img/slide2-1-medium.jpg',
        'img/rect-img/slide2-1-large-medium.jpg',
        'img/rect-img/slide2-1-large.jpg'
    ],
    [
        'img/rect-img/slide3-1-small.jpg',
        'img/rect-img/slide3-1-medium.jpg',
        'img/rect-img/slide3-1-large-medium.jpg',
        'img/rect-img/slide3-1-large.jpg'       
    ],
     ]

function preCacheHeros(images){    
    $.each(imageArray[images], function(){
        var img = new Image();
        img.src = this;             
    })
};

preCacheHeros(0);

所有应用程序都基于巨型背景图像，因此我想根据您在应用程序中的位置预加载图像。

预先缓存图像如何工作？

0 个答案: