jquery - 循环中的 Clone 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” header 以强制缓存。当您请求图像时，这些 header 会从服务器发送。

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

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