在做網頁開發的時候，有時候希望給圖片設置一個備選路徑，即，當src屬性對應的主路徑加載失敗的時候，圖片可以馬上切換到備選路徑。這樣，即使主路徑失效了，顯示備用路徑也不會影響網頁的正常體驗。
注意到網頁中一張圖片加載失敗會觸發error事件，因此可以使用DOM模型中的load和error事件實現這一效果。
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()方法已經廢棄了，因此可以使用bind方法綁定事件
$('#img').attr("src",src1).bind( "load", function() { console.log("圖片加載成功")}).bind("error",function(){ console.log("圖片加載失敗，切換路徑") $('#img').attr('src',src2) });jQuery 3.0
jQuery3.0以后，統一使用on方法捕獲事件
$('#img').attr("src",src1).on( "load", function() { console.log("圖片加載成功")}).on("error",function(){ console.log("圖片加載失敗，切換路徑") $('#img').attr('src',src2) });JavaScript
不想使用jQuery插件時，也可以調用JavaScript原生方法。使用addEventListener方法監聽事件。
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為一張圖片設置備選路徑的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
