网络图像缓存如何工作以及为什么我创建的这个网站只能离线正常工作

Question

这是我的第一个 post，所以如果我做错了什么，请不要生气。这是我做过的最复杂的网站。当我使用 ngrok 在我自己的 apache 服务器上托管它时，它会做同样的事情...

这是托管的网站：

https://zanemechem.000webhostapp.com/

离线：

https://drive.google.com/file/d/0BxbmcM0U2BHcRVBVZzlwMml2QmM/view?usp=sharing

基本上，它的设计是当您加载网站时，所有图像都会放入浏览器的缓存中，然后当您向下滚动时，该移动会转换为更改作为背景的 gif 图片, 然后在它们上面放置一个占位符 png。

离线时，该网站运行完美，但托管时，动画可以正常加载，但在玩过之后，它们会中断并停止加载。

我试了一下 setTimeout 函数，以确保 png 不会加载得太快，但它似乎不起作用。

gif 文件也很小，所以文件的大小不是问题的根源。我相信这与js的这一部分有关：

function createImage(image,gif,previous){
  $("firstgif").css({backgroundImage:"none"});
  var img = document.createElement('img');
  img.src = image;
  $("#loader").show();
  $("#loader").css({backgroundImage: "url("+previous+")"});
  console.log(previous);
  $(img).on("load", function(){

  setTimeout(function(){$("#loader").hide();
  $(gif).css({backgroundImage: "url("+img.src+'#' + Math.random()+")"})},250);
});

我觉得我缺少一些重要的东西，但没有找到它的知识。如果这里有人拥有这方面的知识，将不胜感激！

Answer 1

如果你需要控制gif的播放（gif只能选择播放一次，循环播放一定次数，或者无限循环），你需要一个外部库。它将解析帧并为您提供控制播放的方法。

为此有很多选择，但这里是我使用过的一个。有用。 https://github.com/buzzfeed/libgif-js

网络图像缓存如何工作以及为什么我创建的这个网站只能离线正常工作

How does web image caching work and why does this website I created only work properly offline

javascript

jquery

caching

load

settimeout