Question

我的网站www.runthisday.com拥有JavaScript，可以将页面大约拉到用户屏幕宽度的50％，同时将其他组件推向左侧，为about页面腾出空间。

问题在于，当用户第一次点击“关于”按钮时，此JavaScript非常慢，因为Chrome会等待加载图片。对于其他Web浏览器，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)

Answer 2

如果图片总是一样的话，可能你可以存储在网页缓存中...永远......为了等到第一次......

其他选项不是加载大图像，可能你可以使用一些重复的标题图像...在某些地方，真的需要加载图像......

提高JavaScript速度

2 个答案: