用戶單擊按鈕時動態加載文件

Question

當用戶單擊按鈕時，我正在動態加載文件。 硬編碼有兩種不同的源路徑。

當用戶單擊按鈕時，它應嘗試使用第一個路徑加載文件。 如果加載文件時出錯，則應嘗試使用第二條路徑加載文件。 如果第二條路徑存在錯誤，則應退出並退出嘗試，並顯示一條消息“找不到文件”。

這是我的代碼：

var bt = $("bt");
var file = "http://www.website.com/files/filename.jpg;
var file2 = "http://www.website.com/files/file2.jpg;

bt.on('click', function(){
    $('#mb').attr('src', file);
    $('#mb').on('error', function(){
          $('#mb').attr('src', file2);
          $('#mb').on('error', function(){
               alert('no files could be found');
               return;
          });
    $('#loadHere').load();
    });
    $('#loadHere').load();
});

只要找到其中一個文件，它就可以工作。 但是，如果都找不到，它將繼續循環，因為它無法脫離第一個on錯誤函數。

我真的很感謝大家的幫助。

謝謝。

Answer 1

我認為最簡單的方法可能是圖像src數組和圖像失敗時的良好ol recursion 。

像這樣：

var bt = $("#bt");
var files = [
    "http://www.website.com/files/filename.jpg",
    "http://www.website.com/files/file2.jpg"
]

bt.on('click', function loadFile() {
    var file = files.shift();

    if (file) {
        $('#mb').attr('src', file);

        // Avoid rebinding onerror with '.one()' (as suggested by @rbyte)
        $('#mb').one('error', function () {
           loadFile(); 
        });
    } else {
        // Throw error  
        $('body').addClass('no-file');
    }
});

這是一個小提琴，它演示兩個鏈接何時斷開：

http://jsfiddle.net/x6pz4txo/

這是兩個小提琴，它們說明兩個（或一個）鏈接何時起作用：

http://jsfiddle.net/5sf22hka/ （兩個鏈接都可以工作-但僅加載第一個鏈接）

http://jsfiddle.net/5sf22hka/1/ （第一個鏈接斷開，第二個作品）

Answer 2

$('#mb').attr('src', file2);

該#mb您的onerror事件無限循環，導致您使用相同的#mb元素。 為此，您需要使用不同的元素，但是最好創建new Image以等待圖像加載

嘗試使用

var myImage = new Image,
    myImage2 = new Image;

var count = 0

myImage.src = file
myImage2.src = file2

myImage.onload = function(){}
myImage.onerror = function(){}

myImage2.onload = function(){}
myImage2.onerror = function(){}

不知道要在加載文件或不加載文件后要做什么，但是您可以只使用Image元素重寫代碼，然后將myImage2放在myImage.onload

Answer 3

您應該取消綁定錯誤而不是返回錯誤。

嘗試這個..

var bt = $("bt");
var file = "http://www.website.com/files/filename.jpg;
var file2 = "http://www.website.com/files/file2.jpg;

bt.on('click', function(){
    $('#mb').attr('src', file);
    $('#mb').on('error', function(){
          $('#mb').attr('src', file2);
          $('#mb').on('error', function(){
               alert('no files could be found');
               $('#mb').off('error'); 
          });
    $('#loadHere').load();
    });
    $('#loadHere').load();
});

Answer 4

您需要先解除綁定，然后再附加第二個on error事件。

var bt = $("bt");
var file = "http://www.website.com/files/filename.jpg;
var file2 = "http://www.website.com/files/file2.jpg;

bt.on('click', function(){
    $('#mb').attr('src', file);
    $('#mb').on('error', function(){
          $('#mb').off('error'); 
          $('#mb').attr('src', file2);
          $('#mb').on('error', function(){
               alert('no files could be found');

          });
    $('#loadHere').load();
    });
    $('#loadHere').load();
});

Answer 5

您可以使用堆棧的概念來處理這種情況。

var bt = $("bt");
var images = [
        "http://www.website.com/files/filename.jpg",
        "http://www.website.com/files/file2.jpg"
];

bt.on('click', function(){
    $('#mb').attr('src', images.shift());
    $('#mb').on('error', function(){
        if (images.length) {
            $('#mb').attr('src', images.shift());
        } else {
            alert('no files could be found');
            return;
        }
        $('#loadHere').load();
    });
    $('#loadHere').load();
});

您保留了一個數組，其中包含要嘗試加載的所有圖像。 單擊加載圖像的按鈕后，您將繼續嘗試加載陣列中的所有圖像，直到這些圖像之一存在或沒有更多圖像要加載。

這樣，您不必多次綁定錯誤事件或調用遞歸函數。

希望能幫助到你。

Answer 6

這是我用來解決此問題的方法：

var bt = $("bt");
var images = [
        "http://www.website.com/files/filename.jpg",
        "http://www.website.com/files/file2.jpg"
];

bt.on('click', function(){
    $('#mb').attr('src', images.shift());
    $('#mb').on('error', function(){
        if (images.length) {
            $('#mb').attr('src', images.shift());
        } else {
            alert('no files could be found');
            return;
        }
        $('#loadHere').load();
    });
    $('#loadHere').load();
});