4

This function clones sound objects for a list of images.

The problem is that when the object is written in the DOM, the browser querys the server loads it as a 200 request. However, it is only loading 4 different sound files, over and over again. So it should load as a 304 request from the browser's cache.

All of the sound files are initially loaded in HTML and then cloned. Whenever the page is refreshed the sound files in the HTML receive 304 requests and are loaded from cache, but any file that is cloned is loaded with 200 request (not from cache)!

It there anyway for me to clone these objects without the browser sending a request to the server to load into DOM? Just totally on client side? The data is already written once in the HTML.

I would prefer not to send any requests to the server at all to clone these objects. Since it clones over 50, that's 50 requests being sent to the server in a second. Overloading it.

var increment = 0;
$("img").each(function(i) { //loop for each item
    if (increment > 4){
        increment = 0;  
    }

    if (i != 0) {  //only clone if there are more than one 'img' items      
        $("#hover-" + increment)  //item to clone     
          .clone(true)
          .attr("id", "beep-" + i)  //new name of object
          .appendTo($(this).parent()); 
    }

    $(this).data("instance", i);  //save the integer for loop
    increment=Math.floor(Math.random()*3);  //change increment
})
vzwick
  • 11,008
  • 5
  • 43
  • 63
dandan
  • 1,016
  • 8
  • 16

1 Answers1

0

Each image/sound file reference will resolve in a request to the server unless the image is cached in the browser. You can set "Expires" & "Cache-Control" headers of your image to force caching. These headers are sent from the server when you image is requested.

Another option is to cache the image server side using something like Memcache. This way each image reference will still resolve to the server, but the image will be cached server side for faster access.

For more info see- Kinds of Caches, How Web Caches Work, How (and how not) to Control Caches http://www.mnot.net/cache_docs/

Kevin M
  • 1,524
  • 17
  • 38
  • I've added cache control via .htaccess: Header set Cache-Control "max-age=290304000, public" However, it is unsuccessful. The sound files included in the HTML return HTTP 304 (not modified) and load from cache. However Jquery or Javascript does not read the cache control headers and returns a 200 request for each file request in the loop...so 50 HTTP 200 requests. All other objects on the page, jpg, etc. all return 304. – dandan Nov 23 '11 at 06:11
  • I guess that I say this in a better way. Tried Cache-Control via headers in .htaccess and the original problem remains....Whenever the page is refreshed the sound files in the HTML receive 304 requests and are loaded from cache, but any file that is cloned with jquery is loaded with 200 request (not from cache)! – dandan Nov 23 '11 at 06:38