IMG需要PHP或Javascript延迟

Question

我需要一些东西来帮助我使用jQuery制作一些IMG加载器。我清空浏览器的缓存后，它们在网络上运行良好，但本地测试速度太慢，无法在下载图像时看到加载动画。

所以我需要的是延迟IMG加载指定时间的东西。不仅仅是我制作的img加载器的超时功能。

也许这样可以延迟img加载5秒钟。 PHP中的东西可能是首选，我不确定。非常感谢任何帮助。

<img src="photo.jpg?delay5" />

@Jamund和@Brad都正确回答了这个问题。在内置函数GETIMAGESIZE的帮助下，我添加了自己的功能，使脚本更加精简：

HTML

<!-- HTML-->
<a href="idelay.php?file=poster.jpg"><img src="th_poster.jpg"  width="100" /></a>

PHP

<?php 
// contents of idelay.php (image delay)
$file = $_GET['file'];
$absolutePath = 'http://demos.lap/assets/photos/celebrities/';
$imginfo = getimagesize($absolutePath.$file);
$mimeinfo = $imginfo['mime']; //without curly braces if not calling directly such as in this variable

//header("Content-type: {$imginfo['mime']}");
header("Content-type: $mimeinfo");
sleep(5);
readfile($absolutePath.$file);

?>

Answer 1

其他选项失败（如果您可以从此计算机访问互联网），您只需从远程服务器链接到大图像。

Answer 2

您不需要自定义延迟代码。你需要一个HTTP限制器。

内置Charles, an HTTP debugging proxy。我曾经不小心撞到了一个限制热键并且遭受了3个小时的痛苦，责怪我的ISP。 ：）

以下是其设置的屏幕截图：

Answer 3

http throttler似乎是一个更清晰的解决方案，但如果你最终走PHP脚本路线，你可以这样做：

<!-- your html -->
<img src="/somescript.php?file=myimage.jpg" />


<?php
//contents of somescript.php

$file = $_GET['file'];
$absolutePath = '/absolute/directory/where/images/live/';

$contents = file_get_contents($absolutePath.$file);
if(function_exists('finfo_buffer')) { 
    $finfo = new finfo(FILEINFO_MIME_TYPE);
    $mimeType = $finfo->buffer($contents);
}else {
    $extension = array_pop(explode('.', $file));
    $mimeTypes = array(
        'jpg' => 'image/jpeg',
        'png' => 'image/png'
    );
    $mimeType = $mimeTypes[$extension];
}

sleep(5);
header('Content-Type: '. $mimeType);
echo $contents;

Answer 4

让PHP脚本为图像格式设置适当的标头，延迟一段给定的时间（检查$_GET查询字符串中给出的值），然后readfile()实际图像。哦，并将PHP脚本设置为图像标记中的src。

Answer 5

就像Dagon所说，在你的情况下，php是一个服务器端语言，所以它不会解决你的问题，因为当你的浏览器点击缓存时它不会调用php脚本。

另一方面，您可以创建一个名为客户端并加载图像的javascript函数。然后，您可以完全控制何时显示图像。

此致

Answer 6

解决方案＃1（使用PHP的基本思路）

我的PHP有点过时了，但这是基本的想法。

<强> HTML

<img src="slow.php?path=image.jpg">

<强> PHP

$path = $_GET['path'];
sleep(1); // 1 second
header('image/png');
readfile($path); // may need to do something fancier to get the right path

解决方案＃2（使用jQuery）

这种方法可能需要一些调整才能与你的插件冲突，但它应该有效。

<强> HTML

<img src="image.jpg">

<强>的JavaScript

$(function() {
  $("img").each(function() {
    var $this = $(this);
    var src = $this.attr("src");
    $this.attr("src", ""); // remove image
    setTimeout(function() {
      $this.attr("src", src); // add back after a second
    }, 1000);
  });
});