显示纺车轮图像，直到整页加载
我使用以下代码：
在Body标签内的Layout页面中：
在开始页面中：
$(document).ready(function(){ $(window).load(function(){ $('#loading').fadeOut(); }); });
CSS：
div.loading{ height: 100px; width: 100px; position: fixed; z-index: 1000; left: 50%; top: 50%; margin: -25px 0 0 -25px; display:block; }
问题是旋转图像不会立即出现，由于哪个空白页面出现并且图像在页面加载之前显示，所以需要一段时间。
我想要一个解决方案，其中应立即显示图像，直到整页加载。
虽然有很多方法可以预加载图像（使用CSS / Javascript等），但是对于我来说可靠的小图像的方法，包括图像内联通过
（注意：以上是来自AjaxLoad的实际加载微调器）
它可能不是最易读的，但它是定义加载文档的。 假设它很简单（小于~2Kb），它根本不会影响你的表现。
你应该确保你脑子里没有大量的阻止javascript。 将所有JavaScript移动到页面底部。 如果为此编写了正确的代码，还要在脚本上设置async属性，否则设置defer属性。
完成此操作后，请确保您的加载屏幕是您身体中的第一个元素，这可确保在早期获取资源。 如果你在加载动画之前有很多css加载，字体等，那就是导致下载图像延迟的原因，因为浏览器出站连接被其他下载所饱和。 因此，请尝试将您的下载次数降至最低，或者将它们放在重要区域之下，或者使用异步资源加载器按需获取。
避免阻止显示加载动画的其他资源的最佳方法是内联html中的所有相关部分。 在加载屏幕的html右上方插入css，甚至可以将gif源内联为base64编码数据URI。
使用document.ready和window.load单独实例
例：
HTML
JS
$(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready alert("document is ready"); }); $(window).load(function(){ // executes when complete page is fully loaded, including all frames, objects and images alert("window is loaded"); $('#test').fadeOut(); });
使用警报工作（替换为您的代码）
注意 ：我在小提琴中使用@hexblot加载img，因为加载像这样的小img是一个很好的技巧;-)
我想当你提到document.ready中的代码时，它会在所有dom设置之后触发….而不是使用$（window）.load（），然后它会在窗口加载时立即触发事件。
我在我的HTML中写了这个并且它有效。 但我建议你把它们分成几个文件
}
'