【问题标题】: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() 处,选择应该在顶部的对象

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-08-02
          • 2011-06-15
          • 2012-01-17
          • 1970-01-01
          • 2016-03-22
          相关资源
          最近更新 更多