使用JavaScript為一張圖片設(shè)置備選路徑的方法
在做網(wǎng)頁開發(fā)的時候,有時候希望給圖片設(shè)置一個備選路徑,即,當(dāng)src屬性對應(yīng)的主路徑加載失敗的時候,圖片可以馬上切換到備選路徑。這樣,即使主路徑失效了,顯示備用路徑也不會影響網(wǎng)頁的正常體驗。
注意到網(wǎng)頁中一張圖片加載失敗會觸發(fā)error事件,因此可以使用DOM模型中的load和error事件實現(xiàn)這一效果。
src1='main/image.jpg' //主路徑 src2='another/image.jpg' //備用路徑
jQuery 1.8以前
使用load和error方法捕捉事件
$('#imgMap' ).attr("src",src1).load(function(){console.log("圖片加載成功") }).error(function(){ console.log("圖片加載失敗,切換路徑") $('#imgMap').attr('src',src2) });
jQuery 1.8
由于jQuery1.8之后load()方法和error()方法已經(jīng)廢棄了,因此可以使用bind方法綁定事件
$('#img').attr("src",src1).bind( "load", function() { console.log("圖片加載成功") }).bind("error",function(){ console.log("圖片加載失敗,切換路徑") $('#img').attr('src',src2) });
jQuery 3.0
jQuery3.0以后,統(tǒng)一使用on方法捕獲事件
$('#img').attr("src",src1).on( "load", function() { console.log("圖片加載成功") }).on("error",function(){ console.log("圖片加載失敗,切換路徑") $('#img').attr('src',src2) });
JavaScript
不想使用jQuery插件時,也可以調(diào)用JavaScript原生方法。使用addEventListener方法監(jiān)聽事件。
var Image = document.getElementById('img'); Image.src=src1; Image.addEventListener('load', function(event) { console.log("圖片加載成功") }); Image.addEventListener('error', function(event) { console.log("圖片加載失敗,切換路徑") Image.src=src2; });
以上所述是小編給大家介紹的使用JavaScript為一張圖片設(shè)置備選路徑的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中關(guān)于iframe滾動條的去除和保留
在開發(fā)中經(jīng)常遇到去掉全部的滾動條,去掉右邊的滾動條且保留底下的滾動條,去掉底下的滾動條且保留右邊的滾動條,大家基于js是怎么實現(xiàn)的呢?下面小編通過本文給大家詳細(xì)介紹下,對js iframe滾動條相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11JS+CSS實現(xiàn)超漂亮的動態(tài)翻書效果(思路詳解)
我們平常沖浪時是不是看過一些學(xué)校高級的錄取通知書,翻開通知書就能看見里面的內(nèi)容,呈現(xiàn)出逼真的3D效果,本文帶領(lǐng)大家基于JS+CSS實現(xiàn)超漂亮的動態(tài)翻書效果,需要的朋友可以參考下2023-05-05