2

I have section of a website change it's bg image with jquery. I target the css inside a loop

image.fadeOut(800, function () {
    image.css('background-image', 'url(img/' + images [i++] +')');
    image.fadeIn(800);
});
    if(i == images.length)
    i = 0;

I go to Chrome's dev tools and see that it is making requests for the bg images even though they were already shown.

From the Size Content column says "(from cache)".

Will this hurt performance on the page at some point? Or is it just calling the already loaded image?

Miguel_Velazkez
  • 180
  • 2
  • 12
  • Try this [answer](http://stackoverflow.com/a/3265034/1523400). You can also define a function to auto set the images array. – Shahar Galukman Jun 07 '14 at 05:21
  • The function I'm using is working fine, What I need to know is if the requests being made after loop restarts. – Miguel_Velazkez Jun 07 '14 at 05:30
  • 2
    As you've stated, the overhead is on the browser to see if the images are cached. Considering how prevalent it is to pre-load images, you're probably fine. How many images are you fading in/out? How large? – Jack Jun 07 '14 at 05:45
  • You can check the .complete attribute, it should mostly be true if the image is cached. – Shahar Galukman Jun 07 '14 at 05:47
  • There are just 4 images ~150kb each I have some concern since I went to dev Tools and all I see is this long list of requests... Since I want this for mobile as well, I want to know if this is really from cache. – Miguel_Velazkez Jun 07 '14 at 05:51
  • You can preload image to put it in cache using a loading pixel. – Loenix Jun 07 '14 at 06:10
  • 1
    @Jazzvel - In a perfect world, I'd say "oh yes, they're pulled from the cache!", but considering the state of mobile...you never know ;) I did look into this a bit and found that if you preload the image and reference the image object, it does not make a network request. Here are two fiddles demonstrating: http://fiddle.jshell.net/6V4Dw/show/ (original, which makes multi-requests) and http://fiddle.jshell.net/6V4Dw/1/show/ (preloaded) - FYI for others - the best way to repo the long network req. list is to view in incognito. – Jack Jun 07 '14 at 06:34
  • @JackPattishallJr. Could you please post this as an answer? With the for loop to preload the images! I made some changes to your code and it works as expected! No more extra requests! :D Thanks! – Miguel_Velazkez Jun 07 '14 at 07:23

1 Answers1

1

I was curious and looked into this question a bit more and was able to reproduce the issue where the browser would make n-number of request for the images (although, as you noticed - it was inconsistent...there were times it would only make 4 requests, and other times where it would make 12 and stop... and other times it would just keep going...)

Looking into pre-loading, I found that if you preloaded an image object and reference that, the browser would not make additional requests.

Here's a fiddle demonstrating: http://fiddle.jshell.net/6V4Dw/1/show/

Thanks!

Jack
  • 9,151
  • 2
  • 32
  • 44