0

if I have images defined in my css like this:

@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);}
}

and I created a precache code on JQuery but now that i am doing this now I don't know or don't understand which one will load first. Here is the code: $(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);

all the app is based on giant background images, so I want to preload images depending on where you are in the app.

Monica
  • 1,524
  • 4
  • 27
  • 44
  • Take the `new Image` you've made and actually `.append()` it to the document somewhere. – Blazemonger Nov 21 '13 at 17:10
  • @Blazemonger you can check what i am doing right now here labs.lesevades.com/recipe-book. When I test this on my tablet, it's soo slow! that thsi is why I want to implement a pre caching thing – Monica Nov 21 '13 at 17:19
  • Pre-caching won't magically speed up the page load -- just the opposite, in fact. You want to *delay* loading until (just before) the image is actually ready to be viewed by the user. Exactly how you do so depends largely on the application. – Blazemonger Nov 21 '13 at 17:22
  • @Blazemonger thank you! I'll find some examples on how to do this. – Monica Nov 21 '13 at 17:25
  • 1
    One technique I've used in the past is to change the HTML image's `src` attribute to `data-src`, then use jQuery to set `.attr('src',$(this).data('src'))` when needed. This can speed up a slideshow of large images considerably. You can apply jQuery's `.load` event to images, but [with some caveats](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached). – Blazemonger Nov 21 '13 at 17:27
  • though I have one more question, how will it work if I have my images in my CSS? – Monica Nov 21 '13 at 17:31
  • 1
    It won't. But you can add/remove CSS styles through jQuery using `.css()`, as well. – Blazemonger Nov 21 '13 at 17:58

0 Answers0