javascript - Jquery - 在客户端浏览器尝试下载图像之前删除图像

Question

我想知道是否有人可以帮助我解决我一直遇到的问题。

我有许多可用的大图像，但由于空间限制，我无法创建多个不同尺寸的副本。我使用 PHP GD 函数将图像调整为我需要的大小并将它们输出到浏览器。这可行，但显然需要一些处理时间，因此会影响页面加载时间。我对此很好，但我只想在图像完全加载后显示图像，并在其位置上放置一个加载 gif 直到那个时候。我正在使用 jquery 来执行此操作。

我遇到的问题是无论客户端是否启用了 javascript，页面都可以正常运行。如果未启用 JS，我希望输出标准 img 标签，否则图像将被删除并替换为加载 gif，直到它们完全加载。下面的链接显示了一个简单的非 javascript 不友好示例，说明我想做什么(尝试关闭 JS): http://jqueryfordesigners.com/demo/image-load-demo.php

我一直在使用下面的代码测试基础知识。 attr() 函数将替换为类似 remove() 的函数。这只是在浏览器尝试加载图像之前对图像进行一些测试。

 $(document).ready(function() {
 $( "#Thumbnails .thumbnail img" ).attr('src', '#');
 });

在 IE 中，这可以正常工作 - 在客户端浏览器有机会开始下载图像之前，图像源被替换为“#”。然而，在 firefox 中，它下载图像，然后更改源。在我看来，firefox 加载 jquery onready 事件的时间晚于应有的时间。据我所知，这应该在标准 onload 事件之前和任何内容开始加载之前执行。如果有帮助，我正在使用屏幕上的大量图像 (81) 对其进行测试。

我做错了什么吗？

Answer 1

我会做以下仅 CSS 的解决方案:

像这样创建一个 CSS 类:

preloader {
background: #efefef url(loader.gif) middle center no-repeat;
}

然后对于您的图像只需执行以下操作:

<img src="/big file" class="preloader" />

结果应该是显示 gif 加载程序的背景，直到图像加载为止。如果这不起作用(我还没有测试过)，那么将 IMG 放在一个指定了预加载器类的 div 中，即 <div class="preloader"><img /></div>