Question

我在用户点击按钮时动态加载文件。有两种不同的源路径是硬编码的。

当用户点击按钮时，它应该尝试使用第一个路径加载文件。如果加载文件时出错，则应尝试使用第二个路径加载文件。如果第二条路径出现错误，它应退出并退出尝试并发出消息＆＃34;找不到文件＆＃34;。

这是我的代码：

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

只要找到其中一个文件，它就能正常工作。但是，如果两者都没有找到它会继续循环，因为它无法摆脱第一个错误函数。

我非常感谢大家的帮助。

谢谢。

Answer 1

我认为最简单的方法可能是图像失败时图像src和好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);

该行使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

您需要先取消绑定，在附加错误事件的第二个之前执行此操作。

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

您可以使用堆栈的概念来处理这种情况。

while (sc.hasNextLine()) {
                for (int y = 0; y < a.length; y++) {
                    for (int x = 0; x < a[y].length; x++) {
                        try{
                              a[y][x] = sc.nextInt();
                           }
                        catch(Exception e){
                             e.printStackTrace();
                        }
                    }
                }
            }

您保留一个包含您要尝试加载的所有图像的数组。单击加载图像的按钮后，您将继续尝试加载阵列中的所有图像，直到其中一个图像存在或者无法加载图像。

这样，您不必多次绑定错误事件或调用递归函数。

希望它有所帮助。

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

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

6 个答案: