Material Design Lite 加载所有元素的 JS 回调答案

【问题标题】：Material Design Lite All Elements Loaded JS CallbackMaterial Design Lite 加载所有元素的 JS 回调
【发布时间】：2016-05-11 01:35:25
【问题描述】：

我有一个页面，我正在尝试使用 MDL 呈现标题，然后预加载一些图像。不幸的是，我遇到了一个问题，即图像预加载函数实际上会阻止库正确渲染元素，直到所有图像都完成预加载。

我尝试将预加载功能置于 2 秒的 timeOut 中，但虽然这适用于大多数快速连接，但在足够慢的连接上，似乎会出现同样的问题。

因此，我正在寻找一种能够在库完成加载和执行时通过 Javascript 判断的方法 - 当所有元素都正确呈现时。是否有一个 MDL 触发的回调，我可以使用它来开始预加载 iamges？

或者有更好的替代方案吗？

【问题讨论】：

我不确定这是否适用于 MDL，但它是 perishablepress.com/… 您也可以使用普通的 JavaScript onload 函数。它在绝对加载所有代码、文件、图像后执行（回想一下 display:hidden; 的内容不会在页面加载时加载
你想要延迟加载图片吗？
@AlexeiDarmin 第一个链接的问题是MDL 在页面加载完成之前不会执行，因此直接将所有图像添加到标记中也有同样的问题。与 onload 相同 - 在页面加载完成之前，MDL 不会运行。
@YOU 不完全是 - 我想预加载图像，以便它们在缓存中（它们不会显示在此页面上 - 它们正在被缓存以供稍后页面使用）。我只是不希望在 MDL 完成它的工作之前开始预加载。
当img标签被插入dom时，浏览器开始加载并等待它们被加载。如果您不想在 MDL 之前加载，那么延迟加载图像是唯一的方法，IMO。

【解决方案1】：

使用mdl-componentupgraded 事件。检查事件的目标，看看它是否是要启动的布局组件。我敢打赌，由于我们为旧版浏览器支持所做的工作，是布局导致了这里的问题。如果不是布局，那就四处寻找，直到找到导致问题的部分。

【讨论】：