Question

我每秒都使用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);

Answer 1

您想要预先加载图像。

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

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

Answer 2

在运行该循环之前，您必须预先加载所有图像

更改图像jQuery而不向服务器发出新请求

2 个答案: