JS针对图片加载及404处理

前言

网站运营久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。

img标签事件属性

img标签可使用的时间属性有:

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

img标签常用的事件如下:

onerror:图像加载过程中发生错误时被触发。

onabort:图片加载的时候,用户通过点击停止加载时触发,通常在这里触发一个提示:“图片正在加载”。

onload:当图片加载完成之后触发。

1. 对图片监听onerror事件

<img src="someimage.png" onerror="imgError(this);" />

// 原生JS:
function imgError(image){
    // 隐藏图片
    image.style.display = 'none';
    // 替换为默认图片
    // document.getElementById("img").setAttribute("src", "images/demo.png");
}

// 使用jQuery处理:
function imgError(image){
    $(image).hide();
    // $(this).attr("src", "images/demo.png");
}

注意:需要将处理函数定义在head,防止图片加载出错时没有读取到处理函数

2. 使用jQuery监听error

// 通常不会再HTML里面内联js,可以使用.error对图片进行监听处理
$('#test img').error(function() {
    $(this).hide();
    // $(this).attr("src", "images/demo.png");
});

注意:jQuery加载需要在img前,处理函数需在img后

3. 使用函数处理

// 原生JS解决方案
function $id(id) {
    return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o, t) {
    return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;
}

// 主要逻辑
function image(src, cfg) {
    var img, prop, target;
    cfg = cfg || (isType(src, 'o') ? src : {});

    img = $id(src);
    if (img) {
        src = cfg.src || img.src;
    } else {
        img = document.createElement('img');
        src = src || cfg.src;
    }

    if (!src) {
        return null;
    }

    prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
    img.alt = cfg.alt || img.alt;

    // Add the image and insert if requested (must be on DOM to load or
    // pull from cache)
    img.src = src;

    target = $id(cfg.target);
    if (target) {
        target.insertBefore(img, $id(cfg.insertBefore) || null);
    }

    // Loaded?
    if (img.complete) {
        if (img[prop]) {
            if (isType(cfg.success,'f')) {
                cfg.success.call(img);
            }
        } else {
            if (isType(cfg.failure,'f')) {
                cfg.failure.call(img);
            }
        }
    } else {
        if (isType(cfg.success,'f')) {
            img.onload = cfg.success;
        }
        if (isType(cfg.failure,'f')) {
            img.onerror = cfg.failure;
        }
    }

    return img;
}

以上函数有许多用处:

1. 获取图片信息:图片是否可下载,图片宽高

image('img',{
    success : function () { alert(this.width + "-" + this.height); },
    failure : function () { alert('image 404!'); },
});

// 验证资源是否下载
image('http://www.xuanfengge.com/wp-content/themes/lee2.0/images/banner/banner_2.jpg', {
    success : function () {console.log('sucess')},
    failure : function () {console.log('failure')},
    target : 'myContainerId',
    insertBefore : 'someChildOfmyContainerId'
});

2. 下载并插入图片

var report = $id('report'),
    callback = {
        success : function () {
            report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>';
        },
        failure : function () {
            report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>';
        },
        target : 'target'
    };

image('img', callback);
image('http://www.xuanfengge.com/wp-content/themes/lee2.0/images/banner/banner_2.jpg', callback);

 

参考:http://lucassmith.name/2008/11/is-my-image-loaded.html

原文:http://www.xuanfengge.com/js-image-loading-and-404.html

更多参考:

那些让人惊叹的的国外创意404错误页面设计

减少HTTP请求之合并图片详解(大型网站优化技术)

 

本文:JS针对图片加载及404处理