如何仅在正确呈现 html 后显示图像？答案

【问题标题】：How to display images only after html is properly rendered?如何仅在正确呈现 html 后显示图像？
【发布时间】：2019-12-30 05:11:19
【问题描述】：

我正在获取我所有朋友的个人资料图片并制作一个小部件，该小部件将在点击下一个按钮时一张一张地显示图片。当我向 facebook 服务器发出请求时，在 html 呈现时作为响应，我可以看到所有图像都显示在浏览器上，并且一旦加载完成，一切都非常适合小部件。如何避免在我的页面仍在加载时显示这些图像图片。

我听说过一些关于延迟加载的事情，它只会在页面被向下滚动时加载图像。我没有任何向下滚动选项，也不知道如何使用ladyload，但有什么类似的东西对我有帮助吗？

【问题讨论】：

【解决方案1】：

您可以使用 css 隐藏小部件中的所有图像：

#widget img {display:none;}

然后在读取 DOM 并加载所有图像时使用 jquery 显示它们：

$(document).ready(function() {
  $('#widget img').show()
});

这样的事情会起作用。

【讨论】：

【解决方案2】：

如果您只需要开发支持的浏览器[在这里查看]https://caniuse.com/#feat=loading-lazy-attr

你最好像这样使用内置图像延迟加载：

<img src="https://picsum.photos/id/300.jpg" loading="lazy" />

【讨论】：

【解决方案3】：

有多种延迟加载图像的选项，只要您使用 JavaScript。

有不少库可以帮助你，比如 jquery 的延迟加载插件：http://www.appelsiini.net/projects/lazyload

或者您可以通过我们的老朋友 Google 找到各种替代方案：)

【讨论】：

【解决方案4】：

【讨论】：

【解决方案5】：

您可以使用jQuery。 jQuery 是“一个快速、简洁的库，它简化了如何遍历 HTML 文档、处理事件、执行动画和添加 AJAX。”

jquery 脚本通常用这个命令启动

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

所以这些命令只有在页面完全渲染后才会执行。

在这里你可以找到一些jQuery Tutorials

【讨论】：