循环中的克隆AppendTo函数重载了对服务器的请求-应该从缓存加载！(Jquery)

Question

此函数用于克隆图像列表中的声音对象。

问题是，当对象用DOM编写时，浏览器查询服务器将其加载为200个请求。然而，它只加载4个不同的声音文件，一遍又一遍。所以它应该作为304请求从浏览器的缓存中加载。

所有的声音文件最初都被加载到HTML中，然后被克隆。每当页面刷新时，HTML中的声音文件都会收到304个请求，并从缓存中加载，但任何克隆的文件都会加载200个请求(而不是从缓存中)！

在浏览器不向服务器发送加载到DOM的请求的情况下，克隆这些对象对我来说是有意义的吗？只是完全在客户端吗？数据已经在HTML中写入一次。

我不希望向服务器发送任何克隆这些对象的请求。由于它克隆了超过50个请求，因此每秒向服务器发送的请求就是50个。超载了。

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

Answer 1

除非图像被缓存在浏览器中，否则每个图像/声音文件引用都将在对服务器的请求中解析。您可以通过设置镜像的Expires&Cache-Control头部来强制缓存。这些头文件是在请求您的图像时从服务器发送的。

另一种选择是使用Memcache之类的东西缓存镜像服务器端。这样，每个图像引用仍将解析到服务器，但图像将被缓存到服务器端，以便更快地访问。

有关更多信息，请参阅缓存类型、网络缓存如何工作、如何(以及如何不)控制缓存http://www.mnot.net/cache_docs/