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

我不知道是否有人能帮我解决我一直遇到的问题

我有很多大图像可用，但由于空间限制，我无法创建不同大小的多个副本。我已经使用PHP GD函数将图像调整到我需要的大小，并将它们输出到浏览器。这是可行的，但显然需要一些处理时间，因此会影响页面加载时间。我对此很满意，但我只想在图像完全加载后显示它，并在加载之前在其位置放置一个加载gif。我正在使用jquery来实现这一点

我遇到的问题是，无论客户端是否启用了javascript，都要使页面正常工作。如果没有启用JS，我希望输出标准的img标记，否则图像将被删除并替换为加载的gif，直到它们完全加载。下面的链接显示了一个简单的非javascript不友好示例，说明了我想做什么（尝试关闭JS）：

我一直在使用下面的代码测试基础知识。attr（）函数将替换为remove（）之类的函数。这只是一个测试，目的是在浏览器尝试加载图像之前使图像发生变化

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

在IE中，这是正确的-在客户端浏览器有机会开始下载图像之前，图像源被替换为“#”。但在firefox中，它下载图像，然后更改源代码。在我看来，firefox加载jQueryOnReady事件的时间比它应该加载的时间晚。据我所知，这应该在标准onload事件之前和任何加载开始之前执行。如果有帮助的话，我正在用屏幕上大量的图像（81）来测试它

---

我做错什么了吗？

我会采用以下CSS唯一的解决方案：

创建一个CSS类，如下所示：

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

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

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

---

结果应该是显示gif加载程序的背景，直到加载图像为止。如果这不起作用（我没有测试过），那么将IMG放在指定了预加载程序类的div中，即

您可以将图像写入包含参数的数据属性的noscript标记中。noscript的内容不能通过脚本访问，但数据src等是可访问的。这样，您就有了一个无js解决方案和一个元素，可以根据脚本的需要将其作为目标

因此，使用jquery检测这些noscript元素并在其中添加旋转器。然后在加载图像时交换旋转器

<noscript data-src="example.jpg">
  <img src="example.jpg">
</noscript>

嗨，克里斯，我明白你的意思，我相信这会奏效。我试图解决的问题是，浏览器加载栏在等待加载图像的整个过程中都不处于活动状态。如果可能的话，我希望它能像这样工作：1。图像将被删除并与加载的gifs 2交换。页面已加载。大图像不再存在，因此浏览器停止加载。3.使用移除图像的src创建新图像。一旦这些文件被加载，它们就会取代加载的gif文件。也许你最好有一个带有隐藏内容的DIV容器来指定图像的位置。然后，当您准备好（比如在加载文档时）时，您可以解析出源代码，删除隐藏的内容，并将图像添加到包含的div。。。这样，您就可以懒洋洋地加载它们，而不必先加载任何其他图像？