Question

当我点击我的网站时，您可以直观地看到图像慢慢加载到该地方。我不是很喜欢这个，如果可能的话，我想阻止它发生。

从阅读中看，预装图像似乎是我正在寻找的解决方案？如果这是正确的或者有更好的方法，请告诉我。

在这个论坛上，我看到很多预装图像的答案，下面是我认为有效的代码，但我想稍微改变一下：

var preloadImages = [ img/1.jpg,img/2.jpg];

for(var i = 0 ; i < preloadImages.length; i++) {
   new Image().src = preloadImages[i];
}

我认为上面的代码可以工作，但它需要我将每个图像源输入到一个数组中。在我的网站上有很多图像，我可能会继续添加更多。那么有没有办法将所有图像源推入数组而不实际输入。所以当我添加更多图像时，预加载会自行处理。

Answer 1

如果您想沿着您已经拥有的路线前进，您可以先搜索整个DOM中的标签，然后将它们添加到阵列中。

也许是这些方面的事情：

images = []
$(body).find('img').each ->
  imgSrc = $(this).attr('src')
  image.push imgSrc
i = 0
while i < preloadImages.length
  (new Image).src = preloadImages[i]
  i++

这将需要jQuery，可能还需要一些调整。我无法想象这是最好的方法，但是你仍然需要等待DOM，然后jQuery加载然后用函数运行整个DOM。

如果问题更多的是内容在移动，你可以（并且可能应该）通过为标签本身提供高度和宽度来防止这种情况，如果你事先知道的话。

此外，如果你还没有，它总是值得优化你的图像（手动或使用像Gulp.js这样的构建/编译）。通过使用最佳图像（在大小和格式方面），您可以减少加载时间是多么令人难以置信。

Answer 2

您可以在页面加载后调用以下功能

function preloadImages(){
    $('img').each(function(){
        new Image().src = this.src;
    });
}

您可以使用此功能设置多个页面后加载功能

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = function(){
            func();
        };
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        };
    }
}

然后像这样添加你的功能

addLoadEvent(preloadImages);

但我不认为你可以真正预加载这样的图像。要真正预加载图像，必须在DOM开始在客户端呈现时立即开始加载这些图像。这意味着将它们装入头部。但是如果你这样做，因为你还没有拥有你的html，你将不能够运行上述功能，因为它需要完全下载DOM。您必须将图像源硬编码为javascript，就像您已经做过的那样，并将您的功能作为头部中的第一件事。

图像加载时间

2 个答案: