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

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

它的工作原理，只要其中的一个文件中找到。但是，如果两者都未找到，它将保持循环，因为它不能从错误函数中跳出第一个循环。

我真的很感谢大家的帮助。

谢谢。

Answer 1

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

该行让你的无限循环与onerror事件原因您使用相同的#mb元素。您需要为不同的元素，但它是最好的图像加载等待

尝试使用

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

不知道你想要加载与否文件后做什么创造new Image，但你可能只是重写你的代码与图像元素，并把myImage2里面myImage.onload如果你想

Answer 2

你应该解除错误，而不是返回。

试试这个..

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 3

我认为最简单的方法可能是图像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 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

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

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