图片加载相关技术

目前，出于性能和灵活性的考虑，我们将一些小图片替换为矢量图或字体。除了这些可以替换的小图片，还有一些场景不得不使用位图，比如照片、背景等，对于这些位图，我们需要考虑它们在加载过程中的不同状态，制定不同的呈现方案。图片加载过程中的状态一般包括：何时决定加载图片加载、加载过程结束、故障处理性别分析。决定何时加载图像通常，图像资源是在加载页面时作为单独的请求从服务器获取的。有时候，由于图片数量和大小的影响，导致页面加载缓慢，加载了很多非用户触发的图片，也造成了流量的浪费；图片，等待用户触发图片显示。可见，正确的图片加载时机对提升用户体验有很大帮助。本节讨论与图像加载时间相关的技术：预加载和延迟加载。预加载预加载技术是在用户触发图片显示之前本地加载图片。当用户触发图片显示事件时，浏览器可以及时渲染图片，保证用户浏览网页的流畅性。那么，如何实现预加载呢？本文介绍了实现预加载的三种技术。使用CSS实现预加载这种方法只需要将要加载图片的URL写入一个隐藏元素的background属性，这样图片和CSS文件就可以同时加载了。当用户触发显示图片事件时，在目标位置插入图片。如下代码所示，这里使用了CSS3背景多图特性，只用一个隐藏元素就可以预加载所有图片。.nothing-1{显示：无；背景：url('1.jpg'),url('2.jpg'),url('3.jpg');}（关于后台多图特征的兼容性：http://caniuse.com/#search=cs...）这种方法的缺点是无法控制预加载的时机。它只能在页面加载时一起加载图片。如果图片过多，会阻塞页面的加载事件，延长页面加载时间。仅使用JavaScript实现预加载实现预加载的第二种技术是直接使用JavaScript创建一个新的Image对象，并为其src属性赋值。如下代码所示：varimage=newImage();image.src='...img网址';image.onload=function(){...}image.onerror=function(){...}也可以使用Image对象的load事件和error事件完成图片预加载和失败后的处理，比如提示加载所有图像后。使用Ajax实现预加载。最后一种方法是直接发送ajax请求获取图片资源。同样，ajax请求成功和失败的回调可以作为图片预加载成功和失败的处理。显示以下代码（仅适用于webkit浏览器）：varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){if((xhr.status>=200&&xhr.status<300)||xhr.status==304){...}}}xhr.open("GET",'...imgurl');xhr.send('');Ajax请求方式无冗余Image对象，获取的资源不限于图片。延迟加载延迟加载的核心思想是根据用户需要加载图片资源，而不是在渲染页面时获取所有图片。这样一来，既可以减轻服务器压力，节省用户流量，又可以提高页面加载速度。实现思路首先将页面上所有的图片url写入img的'data-src'属性中，将默认加载图片写入src作为加载图片样式。其次是判断判断加载图片的时机，即图片进入可见区域的时候浏览器。那么问题来了，如何判断一个元素进入了可见区域呢？以垂直方向为例，判断一个元素是否进入可见区域，我们首先需要知道：可见区域的高度：window.innerHeight（IE9之前没有）||document.documentElement.clientHeight（IE标准模式）；元素相对于可视区域的顶部位置：element.getBoundingClientRect().top;元素相对于可见区域底部的位置：element.getBoundingClientRect().bottom；判断是否进入可见区域，即判断元素的顶部是否相对于可见区域顶部的位置是否大于0且小于可见区域的高度;或者，元素底部相对于可视区域底部的位置是否大于0且小于可视区域的高度。上图列出了元素进入可见区域的所有情况。从上到下，第一个元素的top值和bottom值均小于0，不在可见区域；第二个元素的top小于0，但是bottom在0到clientHeight之间，已经在可见区域，需要加载；第三个元素的top和bottom都满足条件，都在可见区域内；其余两个元素与前两个元素一致。当元素进入可见区域时，将img元素的'data-src'属性赋值给'src'属性，标记img元素正在加载，不再做此处理。上述过程的伪代码如下：{return;}loadedList.push(index);loadImage(img);})}最后，将窗口的scroll和resize事件写入判断图片进入可见区域后加载的check函数。优化思路有时如果用户只想查看排序后的图片，他会快速滚动滚动条。在这种情况下，不需要加载已经快速滚动的图片。这个优化的实现思路也很简单，延迟加载逻辑，判断定时器到后元素是否还在可见区域，代码可以修改如下：functioncheck(){imgs.forEach(function(img,index){if(loadedList.indexOf(index)>=0){return;}if(!isInClient(container)){return;}setTimeout(function(){if(!isInClient(container)){return;}loadedList.push(index)loadImage(img)},1000);})}加载状态当图片处于加载状态时，需要给用户提示“the图片正在加载”。图片加载后，提示隐藏。下面，本文将给出加载时提示的两种实现方式。方案一：使用img元素背景本方案的思路是：使用“loading”提示作为img的背景。图片加载时，页面显示背景；图片加载时覆盖背景显示Image。关键代码：.img{width:500px;高度：300px；background:url('data:image/gif;base64,...')centerno-repeat;}这里将“loading”动态图片作为img标签的背景，进行base64编码转换，即可以减少一个请求。浏览器兼容性如下表：浏览器Chrome54Safari10.0Firefox50.0IE8兼容性√√√√兼容性没有问题，唯一的限制是需要设置.img的宽高。如果无法提前获取图片的宽高，可以在img标签中包裹一层，使用外层容器的背景作为“loading”的提示。容器中的img可以根据容器的宽或者高设置其大小，关键代码如下：