jQuery

背景

对于一个图片比较多的网站来说，由于图片加载太慢，会有很多的空白加载图片，这样会给用户很不好的体验。

解决方法

预加载功能会提前加载图片到本地，等待加载完毕后再渲染。

如先使用低质量的图片让用户先开始预览，当图片加载好后，用更高质量的图片来替换掉。

另外一种场景是图片还没被使用到，但客户端已空闲，则可以先行吧图片下载下来，等待使用。

代码

<img data-src="http://www.zeifun.com/image.png" src="http://www.zeifun.com/image-thumb.png" />

<script>
$('img[data-src]').on('load',function () {
    var that = $(this);
    var url = that.attr('data-src');
    var src = that.attr('src');
    if (url == '' || url == src) {
        return;
    }
    var img = new Image();
    img.src = url;
    if (img.complete) {
        that.attr('src', url);
        return;
    }
    img.onload = function () {
        that.attr('src', url);
    }
});
</script>

说明：

• img标签中的src属性为图片缩略图或者一张Loading图

• img标签中的data-src属性为真正的图片，等待滚动到相应位置后显示

• jquery代码中如果真正的图片data-src为空或者与src路径一样时不进行任何操作

• 否则使用data-src路径替换src的路径，开始加载，如果图片已加载过(如两张同样路径的图片)，则直接替换，无需重新加载

如果你使用的是比较旧的jQuery版本，尝试使用以下代码：

<img data-src="http://www.zeifun.com/image.png" src="http://www.zeifun.com/image-thumb.png" />

<script>
$('img[data-src]').load(function(){
    var that = $(this);
    var url = that.attr('data-src');
    var src = that.attr('src');
    if (url == '' || url == src) {
        return;
    }
    var img = new Image();
    img.src = url;
    if (img.complete) {
        that.attr('src', url);
        return;
    }
    img.onload = function () {
        that.attr('src', url);
    }
});
</script>