网站资产随机不加载

Question

我坐在这里拉我的头发..如果你访问my site你应该看到这样的东西：

事情是，有时图像会加载，有时则不会。当我从本地机器上运行所有东西时，它完美运行。但是当我将它上传到我的服务器时，图像会随机停止加载。

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

Answer 1

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

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

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

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

建议的可能修复方法：

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 demo page提供了此功能的演示。