像谷歌图像 PHP 一样的图像加载答案

【问题标题】：Image loading like google image PHP像谷歌图像 PHP 一样的图像加载
【发布时间】：2015-06-02 06:45:31
【问题描述】：

我遇到了网站加载图片的问题。

首页需要加载3张高分辨率图片，打开时先显示网站其他内容再加载这张图片，暂时可以。

但是有点别扭，希望有类似谷歌图片搜索的图片加载过程。

当我在 Google 中点击图片时，它会显示模糊或像素化的图片，看起来分辨率较低且尺寸较小，并且稍后会加载原始图片。

他们可能会使用特殊的东西，因为他们是谷歌，但如果有人以前做过这种事情，我需要你的帮助。

提前致谢

【问题讨论】：

标签： javascript php jquery css image

【解决方案1】：

听起来你想要所谓的“progressive JPEGs”，其中多个不同质量的图像保存在一个文件中，浏览器快速加载低分辨率图像以获取页面中的内容，并将其替换为更高分辨率加载后的图像。

Here's a tutorial 关于在 Photoshop 中将 Web 的 JPEG 保存为渐进式

【讨论】：

【解决方案2】：

您可以使用 jQuery。以下是大致思路，并非具体代码。

对于每个图像，请使用以下内容：

<div>
    <img id="myimg" src="" style="display:none">
    <img src="low-res-version link">
</div>

您还应该保留低分辨率图像。

页面加载后使用jQuery设置图片src，并使用next()函数remove低分辨率图片。

$(document).on('ready', function() {
    $('#myimg').attr('src', 'link to the image').on('load', function() {
        $(this).css('display', 'block').next().remove();
}

您也可以查看这个问题：Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?

【讨论】：

【解决方案3】：

好吧，我从服务器端选择分辨率；立即在 z-index=0 对象中加载低分辨率，将一个或多个高分辨率对象加载到负 z-index 对象中然后在 onload() 处，选择应该在顶部的对象

【讨论】：