jquery - 循环中的克隆AppendTo函数会将请求重载到服务器-应该从缓存加载! (jQuery的)

此功能为图像列表克隆声音对象。

问题在于，当将对象写入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
})

最佳答案

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

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

有关更多信息，请参见-缓存的种类，Web缓存的工作方式，如何（以及如何）控制缓存http://www.mnot.net/cache_docs/