JS針對圖片加載及404處理

2017-02-28 2181 2 編輯:深圳網站建設 來源:互聯網

網站運營久了之后,無法避免會出現圖片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事件

HTML:

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

JS:

// 原生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.sdhowk.live/Public/home/images/logo.png', {

    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.sdhowk.live/Public/home/images/logo.png', callback);

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 麻将怎么打视频教程 体验金赚钱 qq彩票赚钱是真的吗 马会彩票群 麻将来了最强角色 二元期权是靠什么赚钱 新天地娱乐游戏 居民区做什么赚钱 农村有什么好做的生意赚钱 随随便便赚钱的工作 捕鱼大师的工具包 贵州麻将游戏规则 馋小喵三汁焖锅赚钱吗 做小学生教育培训赚钱吗 支付宝工理财怎么赚钱 手机辽宁麻将大全