javascript - 网站资源随机不加载

Question

我坐在这里拉我的头发。如果你访问我的网站，你应该会看到这样的东西：

问题是，有时图像会加载，有时则不会。当我从本地机器运行所有内容时，它运行良好。但是当我将它上传到我的服务器时，图像有时会随机停止加载。

我注意到，如果您使用的是 chrome 并按 ctrl + shift + i 并且控制台会打开。然后您在打开控制台的情况下刷新页面，然后似乎大部分时间都会加载所有内容。

Answer 1

当图像无法显示时，问题不在于它们没有被浏览器加载，而是 Freetile 插件将图像容器的高度和宽度设为零，因此将它们隐藏起来。

我认为发生的事情是您的 Freetile 代码在浏览器完成加载图像之前执行。我假设 Freetile 测量 div 的内容（在加载图像之前为零），然后确定没有内容并应用零高度和宽度。

这解释了结果不一致的原因，因为有时浏览器设法在 Freetile 运行之前加载图像，有时则不然。

我的理论可以通过注释掉 Freetile 代码并将其添加到setTimeout()具有长计时器（例如 5 秒）的调用中来测试，因为您知道到那时图像将完全加载。

建议的可能修复：

1. 将 Freetile 执行添加到$(window).load()而不是$(document).ready(). 差异$(window).load()仅在所有内容（包括所有图像）完全加载时才会触发。

2. 添加一些将侦听图像onload事件的代码并等待它们全部触发（指示所有图像已加载），然后执行 Freetile 执行。您的使用$(document).ready()还不够，因为这仅意味着 DOM 已加载并准备就绪，并不一定意味着所有图像都已下载并渲染。

Answer 2

您还可以将元素尺寸指定为内联 CSS 样式，如下所示：

<div class="myElement" style="width:100px; height:200px">Stuff</div>.

这些尺寸将应用于元素，因此您无需等待加载图像。

此外，您可以将类添加ignore-load-check到您的元素中，Freetile 将忽略您的元素的图像检查。Freetile演示页面提供了此功能的演示。