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>

Answer 2

您可以在包含参数的数据属性的noscript标记内编写图像。 noscript的内容不能通过脚本访问，但是data-src等是。这样你就可以得到一个没有js的解决方案，并根据需要使用脚本定位元素。

所以用jquery检测这些noscript元素并在那里添加rotator。然后在加载图像时交换旋转器。

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

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

2 个答案: