javascript - 如何在正确渲染html后才显示图像？

Question

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

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

Answer 1

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

#widget img {display:none;}

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

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

像这样的东西会起作用。