| web image 加载优化方案 | 您所在的位置：网站首页 › svg 图像占位 › web image 加载优化方案 |
|
大概的placeholder的技术方案基本思路都是先加载一个很小的模糊但是能基本展示图片的轮廓和色调的图片作为占位符，然后再加载真正要展示的图像，大的图像加载完成之后，使用一个渐变的效果隐藏小的图片，展示真正的图片。 placeholder也分为很多类型，常见的有： 使用一片空白占位：这样可以在图像还没有加载出来的时候出现页面塌陷和跳动，不仅用户体验比较差，性能上会导致浏览器的重绘 一张固定图片作为占位符：我们经常会在用户头像的地方使用这个方案，在用户头像没有设置的时候，或者用户头像家在失败的时候，我们可以使用一个内联的矢量图像(e.g.:svg/base64)作为默认的图像 纯色：从图像中获取主颜色，并将其用作占位符的背景颜色，这样可以在你从没有图像到图像家在成功的时候有一个视觉上更加平滑的过度(eg:twitter)。 使用渐变色：使用渐变色，可以获取最终图像的更准确的预览，效果上比纯色更棒(eg:tumblr)。 模糊图像：也称为模糊技术。首先渲染一个低像素和提及很小的模糊话的图像，然后在大图像加载成功的时候，隐藏模糊图像，也会有一个平滑的过度(eg:Quartz).我们可以先了解一下，目前国内外访问量比较大，比较优秀的网站对图片的优化方案 facebookfacebook的技术方案:https://code.fb.com/android/the-technology-behind-preview-photos/ Quartz 1.首先加载一个非常小的的，在他们的网页中他们使用了50px宽度和80%质量的图片 2.使用css来使图片模糊化 3.在小的图片加载完成的时候，开始加载大的图片 4.在大图片加载完毕的时候，隐藏小的图片的同时通过transition:opacity .3s来展现大的图片 5.在用户禁用JavaScript的时候，使用一个里面包含一个作为回退方案 Quoraquora也是先渲染一个模糊的canvas作为placeholder,然后懒加载一个大的图片，先看一下html结构： 1.外层的容器div和canvas都设置了position:relative,然后设置img标签position:absolute来让img标签可以完全重叠在canvas上，并且设置img标签opacity:0，使用户可以看到模糊的图片，模糊的图片的内容用base64内嵌在html中，这样可以减少一次http请求，加快渲染速度。 2.这里使用canvas作为placeholder而不是img标签的原因是，我们需要手动设置占位符图像的宽度和高度，如果你希望输出的图像的宽高比和源图像的宽高比不一样的话，这个时候img标签就无能为力了 3.使用JavaScript来操作展现全部的canvas,首先获取全部带有data-src属性的canvas标签，然后遍历，并获取canvas上的data-src属性，然后使用该值动态创建img，img的load事件中在canvas中绘制出来新建的图片，用户就可以看到模糊的图片了 function loadPlaceholderImage(placeholder) { if(placeholder.getAttribute('data-src')) { var placeholder_img = new Image(); placeholder_img.src = placeholder.getAttribute('data-src'); var width = placeholder.getAttribute('width'); var height = placeholder.getAttribute('height'); var ctx = placeholder.getContext('2d'); placeholder_img.addEventListener('load', function () { ctx.drawImage( placeholder_img, 0, 0, width, height); }, false); } } function loadPlaceholderImages() { var placeholders = document.querySelectorAll('canvas[data-src]'); // Progressively load placeholder images on page load [].forEach.call(placeholders, loadPlaceholderImage); } // We want to load the placeholder images as soon as possible loadPlaceholderImages(); 4.在页面加载完成之后，直接获取所有带有data-src属性的img标签，并便利，重新设置img的src属性，在该img元素加载完毕之后，设置该元素的opacity的值为1(让清晰的img元素显示出来)，并隐藏原来的占位符canvas元素(记得中间添加过度的动画元素) function loadDeferredImages() { var imgDefer = document.querySelectorAll('img[data-src]'); for (var i = 0; i 基于SVG的placeholdersSVG对于矢量图像非常理想，但是我们作为开发人员大多数拿到的图像都是位图，那么问题就是我们应该如何是量化位图，整体上来说，有三种解决方案：描绘轮廓，形状和区域。 使用轮廓：我们可以尝试找出图像的边缘并创建动画使用轮廓动画 形状：SVG可以用于从图像中绘制区域而不是轮廓，在某种程度上，我们可以用三角形来是量化一个位图，从而创建一个占位符，三角形的生成基于三角剖分，很明显三角形越多，对图像的描绘会更多，但是体积也会更大三角形占位符 Primitive：使用Primitive库可以将位图转化由重叠的图像(三角形，矩形，圆形)组成的SVG,它的尺寸很小使其适合内嵌到页面中,从上到下分别是10个，100个多边形组成的图像和原图 SQIP:SQIP试图在模糊化的图像和Primitive之间寻找一个平衡点：它利用Primitive生成一个由几个简单形状组成的SVG,近似于原图像的主要特征，然后使用SVGO为SVG添加一个模糊的效果，这样可以生成一个仅占据800-1000字节的SVG占位符，这样可以在屏幕上看起来很流畅，并提供了图像内容的视觉提示，它和其他网站使用的模糊话的技术不一样的地方在于，这里使用的是SVG的矢量图，而其他大都是使用的位图(eg JPG or WebP).SQIP也可以生成Base64编码的模糊化的图像，直接内嵌在html中，这样可以减少一次网络请求从上面可以看出几乎所有的网站都会采用placeholder的技术方案,并且经过向网站开发人员的查证，也基本罗列了他们基本的技术思路。 How To Generate Placeholder Imageprimitive生成的图片更为优美和更高还原度，但是图片体积比较大,sqip生成的svg体积超小，更为适合作为placeholder，primitive基于go开发，而sqip是完全基于node.js开发的，天然的对前端开发人员更为熟悉。简单介绍一下sqip的使用方法，更详细的参数的用法可以去看看官方文档。 primitive有一个应用场景就是可以实现，“很科幻”的图片渐变的清晰的效果，类似于铁血战士的视角镜头中，从很模糊的一个会动的红点，到一个异性的基本轮廓，再到很清晰的影像，再到肩炮的设计 我们可以使用sqip生成svg格式的placeholder图片,首先安装sqip npm install -g sqip然后，直接在node.js中调用sqip方法即可： /** * 创建svg图片 * @param {string} filePath * @param {string} fileName */ function createSVG(filePath, fileName) { const result = sqip({ filename: filePath, numberOfPrimitives: 10 }); var svgName = `${fileName.split('.')[0]}.svg`; fs.writeFile(`./svg/${svgName}`, result.final_svg, function (err) { if (err) { return console.log(err) } console.log('svg 生成成功'); }) } placeholder drawbacks 会增加一次http请求，增加用户体验的同时，增加了整体的加载时间 在配合lazy-load的时候，实际上placeholder并不会被用户察觉 面向未来的更炫酷的placeholder的案例于技术分享 https://codepen.io/jmperez/pen/BmaWmQ https://codepen.io/jmperez/pen/oogqdp https://codepen.io/ainalem/full/aLKxjm/ https://github.com/EmilTholin/image-trace-loader |
| CopyRight 2018-2019 实验室设备网 版权所有 |