有关<img />图片边边角角的认识

图片无疑是组成网页的重要元素,特别是电商这类的网站,所以有必要好好了解一下该元素。

src属性

src的值是图像文件的URL地址,也就是引用该图像的文件的的绝对路径或相对路径,但是这里面还是有很多门道,

src=""和没有src属性是有区别的,而且区别很大,当src=""时某些老版浏览器会认为图片的路径为当前页面,所以会碰到打开一次一页面产生两次请求的情况,不过经自己测试最新的Chrome、Firefixt、IE貌似都已经修复了这个问题。另外src的值不仅可以是HTTP URI Scheme形式的值,还可以为DATA URI Scheme形式的值。所谓DATA URI Scheme就是通过base64把资源编码成一串字符串,直接嵌入到页面里。

优点:

减少HTTP请求

缺点

1、重用性差且浏览器无法缓存

2、要考虑兼容性,万恶IE6肯定不支持的,IE7也是

3、开发和维护也相对麻烦,首页要把图片转码,然后开发的时候还要记的图片的码一一对应,维护的时候光看一堆base64代码压根就不知道到底引用的是哪个图片,这些如果不借助sass、grunt这些神器那难度还是大大的。

DATA URI Scheme支持的图片格式

 data:image/x-icon;base64,base64编码的icon图片数据
 data:image/gif;base64,base64编码的gif图片数据
 data:image/png;base64,base64编码的png图片数据
 data:image/jpeg;base64,base64编码的jpeg图片数据

当然DATA URI Scheme除了支持IMG元素外还支持vedio等等很多元素,感兴趣的话可以自己了解下

延迟加载图片

图片的延迟加载是前端优化的重要手段,特别像轮播之类的大图片,用Chrome的调试工具把网络切换弱网模式打开淘宝网切换轮播时,可以看到图片并没有立即显示出来,可见这里的图片是延迟加载的,其实淘宝页面的多数地方都是用js监听滚动渲染的,HTML源码中主要布局一些大的骨架,其他资源按需加载进来。

1

说说常规的图片延迟加载,老牌的jQuery插件非jQuery.lazyload莫属了,其核心的思路就是HTML中IMG标签的src都用一个很小的透明图片点位,真实的图片地址保存在标签的一个自定义属性中。

<img src="blank.gif" data-src="mm.jpg">

然后通过JS监听滚动事件,拿到显示在视窗中的IMG并把src设置成真实的图片地址,这时图片才真正开始加载,判断某个元素是否在视窗中的jQuery方法

function isInView(ele){
	var $ele = $(ele);
	var ot = $ele.offset().top;
	var st = $(window).scrollTop();
	var dis = st + $(window).height();
	return dis > ot && st < ot;
}

工作中经常会碰到这样的需求,需要获取延迟加载进来图片的尺寸,比如有下面这样的代码

$(function(){
	$('body').append('<img id="testimg" src="http://www.lmqy.net/static/201602/switchable/img/5.jpg">');
	console.log($('#testimg').height()); // 0
});

不出意外的话输出的值是0或者每次刷新页面的值都不一样,反正就是获取不到图片的真实尺寸,出现这种情况的原因是当append图片之后,浏览器开始去下载图片,但图片还没真正下载完成下面就直接获取他的尺寸了,显然是不行的。处理这种情况的方法就是给图片绑定加载完成事件然后执行回调来获取尺寸。

var img = new Image();
img.src = 'http://www.lmqy.net/static/201602/switchable/img/5.jpg';
img.onload = function(){
	console.log(img.height);
}

之前写了一篇关于实现异步加载js文件及加载完成后回调跟这个是类似的,上面就是用到了图片的onload事件,除了该事件图片还有其他很多的事件。

图片相关的事件

onerror

这是啥东东呢?onerror事件当图片请求失败触发,用处就是防止有些从后端返回的图片是404,然后绑定onerror事件把图片的src另外指向一个默认的图片地址,早些年JD网站首页的图片就加了这个属性,大概的代码就是这样的

<img src="xxx.gif" onerror="javascript:this.src='http://www.lmqy.net/static/201602/switchable/img/5.jpg';" alt="pic" />

由于xxx.gif图片根本不存在,所以通过onerror事件设置一个默认的图片。相对向用户展示一个红叉叉更好些。如果onerror里的设置的图片也不存在呢?那不是又要触发onerror这样一直循环下去,在某些浏览器下就会报错,于是还要改造一下

<img src="xxxx.gif" onerror="errorImg()" />
function errorImg(){
	var img = event.srcElement;
	img.src = "default.gif";
	img.onerror = null; // 执行一次后把图片onerror的设置为null,就不引起循环了
}

onabort

该事件在图片中断加载时被触发,通常有几种情况:

1、用户主动点击浏览器工具栏的停止加载按钮,就是下面的这叉叉

12、网络中断这里其实包括弱网环境特别是移动端也会触发onabort

个人认为该事件主要用处在于用户行为分析以及统计移动端图片中断加载的情况。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注