Skip to content

progressive loading

How Medium dose progressive image loading

  • 控制图片加载的好处：

lazy loading: the large images are only requests when they are within the viewport.

tailored

  • 关于模糊效果的讨论

  • canvas组 （来源）运用 ctx.globalAlpha （0到1之间）加上requestAnimationFrame

  • filter组（css3的filter: 50px系列）加上transition也可以实现流畅过度

  • 其他图片加载方案

  • 搜索引擎的用图片主色开始加载

❤ demo: https://jsfiddle.net/DearVikki/g8L1zd9v/3/

❤ 自我感觉：css和canvas都是控制filter~但感觉css的写起来简单许多！！canvas会有一点更流畅…么？╮（´◔౪◔）╭

Speaking at CSSConf Australia 2016

  • 有些图片某些情况下需要展示某些情况下不需要，那么这些图片最好放在background-image了，否则直接用img标签的话display: none浏览器依然还是会下图片的喔！~
  • 对于都是展示图片的网页 无需在用户拉到图片可视区域之前就加载图片~
  • 关于thumbnails应该用什么格式才最好（根据facebook 控制在42px*42px<200 Bytes）作者测试得到WebP会比jpeg小将近3/4喔！

过程中的小发现：

  • el的padding-top(y轴)和padding-left(x轴)都是以自己的width作为依据的…虽然有点奇怪 但是想想el的高度一般决定其parent的高度 如果el一方面的padding-top右其parent的高度指导 又进而决定了自己的height 那么又得反过来影响parent的高度了 由此情况会很循环…https://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width

  • 很多图片储存的cdn服务商会自带图片压缩功能（外部资源最好放在cdn服务商上 这样不同地域打开的网页会从最近的服务器上下载资源 速度会更快）

已阅读的References: