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...');
        }
})
...

関数に 3 番目の引数を渡すだけです。 

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

そしてそれを呼び出します

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