在不向服务器发出新请求的情况下更改图像jQuery

change image jQuery without making a new request to the server

本文关键字：情况下 jQuery 图像 请求 服务器 新请求      更新时间：2023-09-26

我正在使用jQuery每秒更改一个背景图像。然而，当我查看Google chrome中的NETWORK选项卡时，我发现每秒都会对图像发出新的GET请求，这显然是非常不经济的。有人能建议在这里采取更好的方法吗。我在其他帖子中读到，图像应该被缓存，浏览器应该知道不要向服务器发出请求，但据我所知，浏览器仍在发出请求。

请参阅下面的当前代码。

var x = 0,
homepageImages = ["1","2","3","4"];
setInterval(function(){ 
   x++;
   if(x === 4){
     x = 0;
   }  
  $('.desktop-main-img').attr('src', 'img' + homepageImages[x]  + '.jpg');
 }, 1000);

然后您需要预加载图像。

var x = 0,
homepageImages = ["1", "2", "3", "4"];
// invisible preload the images
for( var i = 0; i < homepageImages.length; i++ )
    $(new Image()).src('img' + homepageImages[i]  + '.jpg');
setInterval(function()  {
    x = ++x === 4 ? 0 : x;
    $('.desktop-main-img').attr('src', 'img' + homepageImages[x]  + '.jpg');
}, 1000);

但请记住，网络选项卡可能会显示获取图像的请求。但是您应该看到，响应是缓存的。服务器告诉你的浏览器，图像没有更改/他已经知道图像，不会传输任何数据。

在运行循环之前，您必须在主体中预加载所有图像

相关文章：