在动态网站中快速加载图像

Question

所以我一直在开发一个动态网站，在某个页面上有大约 200 多张图片，目前，该网站会提取我服务器的信息，并在每个查询中逐个处理。这导致网站在 15 秒内加载。我想知道我是否可以让图像并行加载或预加载它们，或者任何让我加快这个过程的方法

非常感谢， 维韦克

Answer 1

正如--this-- 文章的第 6 点所述，从您的服务器加载图像不是最佳做法。那篇文章还有很多其他的好技巧，例如以人眼无法察觉的方式降低图像质量，以提高加载速度。无论如何，当从各种 URL 访问图像时，您将不会遇到此问题。这很容易，因为您可以直接从 HTML 加载图像。这是一个代码示例：

var myImage = $("<img />").attr('src', 'https://myimageurl.net/myimage.jpg')
    .on('load', function() {
        if (!this.complete || this.naturalWidth == 0 || typeof 
this.naturalWidth == "undefined") {
            //error code
        } else {
            $("#thingToBeAppended").append(myImage);
        }
});

但是，如果您对从服务器加载图像一无所知，则一种解决方案可能是使用异步技术，例如 jQuery.ajax()。然后，您的图像或多或少也会被并行加载。