javascript - 提高 JavaScript 速度

Question

我的网站，www.runthisday.com ，具有 JavaScript，可将“关于”页面拉至用户屏幕宽度的 50%，同时将其他组件推到左侧以为“关于”页面腾出空间。

问题是，当用户第一次单击“关于”按钮时，这段 JavaScript 非常慢，因为 Chrome 会等待图像加载。对于其他网络浏览器，JavaScript 很快，但图像需要一秒钟才能加载。第一次使用该按钮后，“关于”幻灯片工作正常。但真正重要的是第一次。

有没有办法解决这个问题，以便 JavaScript 快速运行并且在单击按钮时图像立即出现？将用户引导至加载页面可以解决此问题吗？如果是这样，您能否引导我到某个地方，向我展示如何使用 JavaScript 以这种方式加载网站。

我非常感谢您的帮助。

Answer 1

您的图像巨大。因此，首先将它们调整为更易于管理的大小。

但是您可以做的另一件事是预加载图像。这是一个简单的包装器，您可以使用它来加载一些图像并知道它们何时准备好。

// Url -> Promise<ImageElement>
var image = function(src) {
  return new Promise(function(pass, fail) {
    var i = new Image()
    i.src = src
    i.onload = event=> pass(i)
  })
}
    
var url = "http://www.runthisday.com/img/the_hammer.jpg"
image(url).then(elem => document.body.appendChild(elem))

您甚至可以使用 Promise.all 包装器来确保已为特定部分加载多个图像

Promise.all([
  image('one.jpg'),
  image('two.jpg'),
  image('three.jpg')
]).then(images => console.log("all images loaded", images)