0

我有一个非常简单的 jQuery 预加载器，它可以正常工作（我相信代码是正确的，但请继续检查一下）......
我想要做的是，如果图像无法下载，然后尝试另一种变体图像，直到你找到一个....只有多达 4 个变体，由路径内的数字表示。

让我解释一下：
图像路径可能如下
.../images/800px/image1.jpg

如果那个失败，然后尝试
.../images/350px/image1.jpg

如果那个失败，然后尝试
.../images/100px/image1.jpg

如果那个失败，然后尝试
.../images/50px/image1.jpg

如果那个失败，然后尝试
.../images/30px/image1.jpg

如果您注意到，所有这些变化的区别在于路径内的数字......即 800、350、100、50、30

现在，在函数 load_img（如下）中，我正在考虑使用 .error 属性递归调用函数，直到找到图像..

这是最好的方法吗？关于如何实现这一目标的任何提示或最佳实践？

在此先感谢
马尔科

这是代码示例

<div id="zoom-artwork"></div>

<ul class="nav-zoom-artwork">
   <li><a href=".../images/800px/image1.jpg">image doesn't exist...</a></li>
   <li><a href=".../images/800px/image2.jpg">image 2</a></li>
   <li><a href=".../images/800px/image3.jpg">image 3</a></li>
</ul>

...

$('#nav-zoom-artwork a').click(function(e) {
   var src = $(this).attr('href');
   var alt = $(this).children('img').attr('alt');   

   load_img(src, alt);

   e.preventDefault();
});


// ZOOM artwork
function load_img(src, alt) {
   var img = new Image();

   $(img).load(function() {
      // set the image hidden by default
      $(this).hide(); 

      // remove the loading class, then insert the image
      $('#zoom-artwork').removeClass('loading').html(this);

      // fade in the image to create a nice effect
      $(this).fadeIn(400);
   })
   .error(function() {
      alert('try another size... call the function recursively with another path...');
   })
   .attr({
      src:src,
      alt:alt
   });
}
4

1 回答 1

0

结果比我以前认为的要简单....只是在.error函数上添加了这段代码，瞧！....

...  
})
.error(function() {
        //try other sources
        if (other_src != null && other_src.length) {
            //alert('found another source, loaded!');
            load_img(other_src, alt, el, null);

        } else {
            alert('no more sources...');
        }
})
...

我只需要将第三个参数传递给函数 

function load_img(src, alt, other_src) {    
...
}

并称之为

load_img(src, alt, '#zoom-cover', a_str[0]);
于 2011-03-07T19:36:04.493 回答