图片相关

获取图片的原始尺寸

1. 老旧浏览器

function getNaturalSize(img) {
    var image = new Image();
    var naturalSize = {};
    image.src = img.src;
    naturalSize.width = image.width;
    naturalSize.height = image.height;
    return naturalSize
}

var img = document.getElementsByTagName('img')[0]
getNaturalSize(img); // 返回原始尺寸

分析： 新建一个 image 对象，将当前图片的 src 赋值给 image.src, 此时 image 会发起网络请求从网络下载该图片。此时 image 的宽高就是所求图片的原始尺寸。

2. html5：

htlm 5 提供了一个直接获取图片原始宽高的 API —— naturalWidth / naturalHeight:

function getNaturalSize(img) {
    var naturalSize = {};
    naturalSize.width = img.naturalWidth;
    naturalSize.height = img.naturalHeight;
    return naturalSize;
}

var img = document.getElementsByTagName('img')[0]
getNaturalSize(img); // 返回原始尺寸

兼容 ie 6/7/8 和现代浏览器的写法：

function getNaturalSize(img, callback) {
  var naturalSize = {};
  if (img.naturalWidth) {
      naturalSize.width = img.naturalWidth;
      naturalSize.height = img.naturalHeight;
      callback(naturalSize);
  } else {
      var image = new Image();
    	image.onload = function () {
    		naturalSize.width = image.width;
    		naturalSize.height = image.height;
    		callback(naturalSize);
    	}
    	image.src = img.src;
    }
}

var img = document.getElementsByTagName('img')[0]

getNaturalSize(img, function (dimensions) {
	// 图片处理代码
});

判断图片是否加载完成

1. onload 事件
2. onreadyStatechange 事件
3. complate 属性

图片懒加载

一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。避免网页打开时加载过多资源，让用户等待太久。

另外，常常会在图片未加载完成时显示一张 Loading 图片。在一个页面上使用同一张图片时，浏览器会进行缓存，只会发送一次 http 请求，因此，我们书写页面的所有图片的html 如下：

<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">

懒加载的原理是：监测用户的滚动动作，当图片进入页面中的时候使用 js 获取 data-src 中的值进行图片图片加载，在图片加载完成时触发的 load 事件中将图片的 data-src 赋值给 src 由于该 url 的图片已经加载完成，这里并不会再发起相同的 http 请求，图片便会显示为正确的图片。

// 注意: 需要引入jQuery和underscore
$(function() {
    // 获取window的引用:
    var $window = $(window);
    // 获取包含data-src属性的img，并以jQuery对象存入数组:
    var lazyImgs = _.map($('img[data-src]').get(), function (i) {
        return $(i);
    });
    // 定义事件函数:
    var onScroll = function() {
        // 获取页面滚动的高度:
        var wtop = $window.scrollTop();
        // 判断是否还有未加载的img:
        if (lazyImgs.length > 0) {
            // 获取可视区域高度:
            var wheight = $window.height();
            // 存放待删除的索引:
            var loadedIndex = [];
            // 循环处理数组的每个img元素:
            _.each(lazyImgs, function ($i, index) {
                // 判断是否在可视范围内:
                if ($i.offset().top - wtop < wheight) {
                    // 设置src属性:
                    $i.attr('src', $i.attr('data-src'));
                    // 添加到待删除数组:
                    loadedIndex.unshift(index);
                }
            });
            // 删除已处理的对象:
            _.each(loadedIndex, function (index) {
                lazyImgs.splice(index, 1);
            });
        }
    };
    // 绑定事件:
    $window.scroll(onScroll);
    // 手动触发一次:
    onScroll();