开发者社区> 行者武松> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

更多关于渐进式图片加载的实现

简介:
+关注继续查看
福利推荐:阿里云、腾讯云、华为云等大品牌云产品全线2折优惠活动来袭,4核8G云服务器899元/3年,新老用户共享优惠,点击这里立即抢购>>>

以前的一篇文章中,我仔细分析了Medium.com用来展示图片的技术,这种技术可以在展示图片的时候让图片从一张模糊的图片过渡到一张清晰的图片。从那以后,我找到了其他一些同样采用相似方式展示图片的网站。下面让我们来看一下Quora, Quartz 以及 Clicktorelease 是如何实现的。

快速导读

图片是网页中最大的静态资源,他们通常会占据三分之二的空间。图片优化和选择正确的图片格式是至关重要的。另外,有些网站会在图片没有加载的时候,使用小的缩略图当作占位符。这种技术通常也被称作“blur-up“。这种技术主要是为了提升用户感知性能,如果搭配懒加载使用,还可以达到节省流量的效果。

当然这项技术还是有其他可替代的技术的。其中一种是使用一张单独的JPEG图片,调整它的扫描脚本使得可以快速渲染出一个原始的像素化的版本,并且在后续扫描中逐步渲染出最终清晰的图片。我推荐你通读Progressive JPEGs and green Martians?去更了解这项技术。

还有一点,如果你喜欢图片加载优化这方面的内容,可以关注Cloudinary’s Blog,里面有很多关于这方面话题的博文。

Quartz

Take a look at the following video, recorded when accessing?a page on QZ.com?with a throttled connection:

看一下下面的这个视频,它记录着当使用慢速的网络访问QZ.com的网页时,Quartz's 的方式按照下面的步骤实现:

  1. Request a small?<img />?that will be blurred. In their case, they use 50px width images, with a 80% quality.
  2. 请求一个小的用于被模糊的<img />。在这种情况下,他们使用宽度为50px,质量为80%的图片。
  3. 通过CSS filter应用模糊效果。
  4. 请求一个大的图片。

关于Quartz的一个有趣的地方在于,他们使用响应式图片的语法去标记指定大图片。最大的不同点在于他们使用data-srcset属性,这样他们就可以控制何时发起请求并且防止浏览器在标记被解析之后去请求大尺寸的图片。

我发现这种方式非常优雅,因为他们尝试遵循“标准”的方式去处理图片,就是通过增加额外的字段以实现懒加载和实现过度动画。

<figure class="progressive-image featured-image size-extra-large">

  <picture style="padding-bottom: 56.1875%; background-image: url(https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50);">

    <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50">

    <img alt="INDIA-fishermen" />

    <noscript>
      <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320" alt="INDIA-fishermen">
    </noscript>
  </picture>
  <figcaption>...</figcaption>
</figure>

Quora

Quora也是在他们的po文里面实现了图片blur-up技术。例子详见head to this page

这里我们可以看到当显示模糊占位图片的时候页面的样子。

让我们深入代码来看看到底时如何实现的。首先,让我们来看看HTML标记:

<div>


    <canvas class="qtext_image_placeholder portrait qtext_image zoomable_in zoomable_in_feed"
        width="499"
        height="874"
        data-src="data:image/PNG;base64,UklGRmgAAABXRUJQVlA4IFwAAADwAQCdASoGAAoAAUAmJYgCdEf/g…iD0z/yA/5ipcuk5xHSdrS38j8CkH7s+vKeZu9EwRy0f/KPIlo/+UifdfcpiRcJiRnXXAAAAA==">
    </canvas>




    <img src />
</div>

为什么同时使用data-srcmaster-srcmaster_src?图片是当点击图片获取更大尺寸时加载的那张图片。

Quora没有使用模糊效果。他们使用canvas.drawImage()在canvas里渲染小的缩略图。你可以看到通过查看他们的代码发现这个方法,在捆绑在主要JS文件的shared/lazy_load_images模块中可以看到:

// draw the data-uri image on the canvas
function a(e) {
    if (e.getAttribute("data-src")) {
        var t = new Image;
        t.src = e.getAttribute("data-src");
        var i = e.getAttribute("width")
          , n = e.getAttribute("height")
          , o = e.getContext("2d");
        t.addEventListener("load", function() {
            o.drawImage(t, 0, 0, i, n)
        }, false)
    }
}
// go through all canvas on the page with a data-src
function r() {
    var e = document.querySelectorAll("canvas[data-src]");
    d.insertionQ("canvas[data-src]").every(function(e) {
        a(e)
    }),
    [].forEach.call(e, a)
}

简单来说,Quora所使用的技术主要包括:

  1. 在canvas中渲染一个内联的非常小的png。
  2. 使用Webp(如果支持的话)或者其他格式请求大尺寸图片。
  3. 将大尺寸图片设置为<img />元素的资源,然后逐渐变化它的透明度并且隐藏canvas。

Clicktorelease

Clicktorelease.com,?@thespite,刚刚重新设计过,也为图片设置了懒加载。

这里最重要的部分是缩略图并不是要加载的图片本身,而是缩略图DCT矩阵的值,这使得负载非常非常小。

加载图片的步骤具体如下:

  1. 请求thumb-src图片。这是一个16x4的PNG 缩略图,通常大小在300B左右。
  2. 创建一个<canvas />并且在上面绘制通过反向计算缩略图的DCT得到的图片。
  3. 使用original-src地址请求大尺寸的图片。如果浏览器支持webp格式,那么“.webp”就会被添加到src上,这样就会请求webp格式的图片。

原始的标记大概是这样的:

<div>




    <div>

    <div>

        <noscript><img src="/images/graphical-web-2016.jpg"></noscript>
    </div>
</div>

我认为这是一个非常好关于渐进增强的例子,提供了<noscript>?作为替代,并且逐步叠加效果,从一个固定的背景图片,到一个模糊的图片,再到最后的支持webp的大尺寸的图片。

总结

看到实现渐进式图片加载的这些微小的变化非常有趣,其中有使用Javascript实现的,有基于响应式图片实现的,有使用CSS filters实现的,还有使用canvas实现的。

如果你想要一个基础的例子,可以移步my “Reproducing Medium loading image effect” pen。如果你也看到其他的网站实现了同样的技术,请记得一定要告诉我。

相关内容

我在我的RenderConf 2017的演讲Progressive Image Rendering中涉及到这个话题,当然这中间还一并提到其他一些可以使得图片更高效加载的技术。

我也写过关于使用SVG去创建占位符的方法,详见Using SVG as placeholders?—?More Image Loading Techniques


原文发布时间:2018-07-02

本文来源掘金,如需转载请紧急联系作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
原生JS实现最简单的图片懒加载
原生JS实现最简单的图片懒加载
83 0
js实现上传图片前本地预览
js实现上传图片前本地预览
73 0
[译] 原生实现图片懒加载
在本文中,我们将研究新的 loading 属性,它为 及 带来了延迟加载的能力。
944 0
图片懒加载
懒加载的目的不是为了拦截图片的src,而是防止图片未加载完成时出现的空白。所以强行将data-src换成src去加载页面对于没有src属性的标签可以实现(按背景图处理),但对于含有src属性的标签是不可行的(如:img)。
999 0
fbh
图片预加载
图片预加载 图片预加载的主要思路就是把稍后需要用到的图片悄悄的提前加载到本地,因为浏览器有缓存的原因,如果稍后用到这个url的图片了,浏览器会优先从本地缓存找该url对应的图片,如果图片没过期的话,就使用这个图片 如下是摘录具体的实现思路: 《javascript图片预加载详解》图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。
1105 0
H5实现本地预览图片
我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: DOCTYPE html> UploadFile 实现预览功能的js代码如下: window.
766 0
图片懒加载
lazyload用来加载比较长的页面中的图片,直到下拉到显示他们为止,页面太长的时候使用它可以加快页面显示的速度。 1.使用它 使用它只需要引用两个文件,如下: 还要在img的标签中添加一个属性,还要给这个img添加一个名字,代码如下: $(function() { $("img.
572 0
js实现图片上传预览及进度条
原文js实现图片上传预览及进度条? ?? 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: ???? 1:去除浏览器默认的样式; ???? 2:图片从本地选择后,立即预览图片; ???? 3:使用上传可以查看上传进度(本...
1464 0
+关注
行者武松
杀人者,打虎武松也。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
渐进式动画解决方案
立即下载
渐进式动画解决方案
立即下载
低代码开发师(初级)实战教程
立即下载


http://www.vxiaotou.com