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

Posted 2023-02-24

【中文标题】在动态网站中快速加载图像

【英文标题】：Load Up Images Quickly in Dynamic Website

【发布时间】：2018-07-27 21:02:36

【问题描述】：

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

非常感谢， 维韦克

【问题讨论】：

浏览器对下载的管理非常好，但是您应该考虑为您的图像添加延迟加载，在这种情况下仅显示图像在用户的视口中，因此他有更好的体验：我们的我们使用这个的公司：github.com/aFarkas/lazysizes

使用适当的图像优化技术和 CDN 来加速图像的交付。查看 ImageKit.io - imagekit.io。它将处理优化部分并提供全球 CDN。

【参考方案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()。然后，您的图像或多或少也会被并行加载。