用户单击按钮时动态加载文件

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();
});