您可以通过JQuery向服务器请求缩略图,服务器下载文件,创建缩略图,并在调整大小时将缩略图的URL发送回客户端.这样,客户端将在准备好后逐渐收到缩略图.

编辑经过实验后,我发现只要img请求图片,即使你动态删除它的src属性,下载也会继续.

所以我决定编写一个示例代码(没有太多验证,它只适用于jpeg,添加其他类型将非常容易).解决方案分为3部分：

HTML

首先,我使用了一个带有一些特定属性的空div来让jQuery加载什么.我需要向Nuria Oliver道歉,她有我在网上找到的第一张“大图”.所以,这是一个示例div：

<div class="thumbnail" data-source="http://www.nuriaoliver.com/pics/nuria1.jpg" data-thumbnail-width="100" data-thumbnail-height= "200"/></div>

我使用缩略图作为类,以便能够轻松找到我想要的div.其他数据参数允许我使用源,宽度和高度配置缩略图.

JavaScript / jQuery

现在,我们需要找到所有这些请求缩略图的div …使用jQuery很容易.我们提取所有数据设置并将它们推送到一个数组中.然后,我们使用查询提供PHP页面并等待响应.这样做的时候,我正在用一些显示“进度”的HTML填充div

<script type="text/javascript">
    $(".thumbnail").each(function() {
        var img = $(this);
        var thumbnailWidth = img.data("thumbnail-width");
        var thumbnailHeight = img.data("thumbnail-height");
        var thumbnailSource = img.data("source");

        var innerDiv = "<div style='width:" + thumbnailWidth + "px; height:" + thumbnailHeight + "px'>Loading Thumbnail<br><img src='loading.gif'></div>"; 
        img.html(innerDiv); // replace with placeholder

        var thumbnailParams = {};
        thumbnailParams['src'] = thumbnailSource;
        thumbnailParams['width'] = thumbnailWidth;
        thumbnailParams['height'] = thumbnailHeight;

        $.ajax({
            url: "imageloader.PHP",data: thumbnailParams,success: function(data) {
                img.html("<img src='" + data + "'>");
            },});
    })
</script>

PHP

在PHP方面,我做了一个快速测试,看看图片是否已被缓存(我只是使用文件名,这应该更复杂,但它只是给你一个例子)否则我下载图片,调整大小,将其存储在缩略图文件夹中并返回jQuery的路径：

<?PHP

$url = $_GET["src"];
$width = $_GET["width"];
$height = $_GET["height"];

$filename = "thumbnail/" . basename($url);
if(is_file($filename)) // File is already cached
{
    echo $filename;
    exit;
}

// for now only assume JPG,but checking the extention should be easy to support other types
file_put_contents($filename,file_get_contents($url)); // download large picture
list($originalWidth,$originalHeight) = getimagesize($filename);
$original = imagecreatefromjpeg($filename); // load original file
$thumbnail = imagecreatetruecolor($width,$height); // create thumbnail
imagecopyresized($thumbnail,$original,$width,$height,$originalWidth,$originalHeight); // copy the thumbnail
imagedestroy($original);
imagejpeg($thumbnail,$filename); // overwrite existing file
imagedestroy($thumbnail);
echo $filename;

浏览器

那么,它到底做了什么？在浏览器中,当我打开页面时,我首先看到：

一旦服务器完成处理图像,它就会自动更新为：

这是缩略图版本,原始图片的100×200.

我希望这涵盖了你需要的一切！