3

次のリストがあり、ユーザーがliをクリックすると、ul.listを非表示にしてからdiv.singleを表示し、同時にimg.data-img srcをliのdata-imgに設定します、しかし、読み込み中に、img src を li 要素内にある loader.gif に設定したいと思います。

<ul class="list">
<li data-id="7" data-thumb="http://test.com/assets/pdc/thumbs/66.png" data-img="http://test.com/assets/pdc/img/66.png" data-country="Australia" data-company="Big Farm" data-app="Tea" data-brand="Big Farm" data-package="500" class="product air-500 cat7">
    <img class="tip" data-country="Australia" data-brand="Big Farm" src="assets/img/ajax-loader.gif">
</li>
</ul>

<div class="single">
<img class="data-img" src="">
</div>

var preloader = $(this).find('.tip').attr('src');

$('.single aside img').attr('src', preloader);
$('.single aside img').attr('src', url).load(function () { 
            });
4

1 に答える 1

1

画像がいつ読み込まれたかを判断するのは非常に難しい場合があります。画像をプリロードしたいだけかもしれません (を使用する$("<img>").attr('src', src)だけで十分です)。

に頼ることもできます.loadが、私の経験では 100% ではありません。

$("li").on('click', function () {
   var $this = $(this);
   //Show the throbber
   $this.find('.tip').show();

   //After image finishes loading, hide the `ul.list`
   $(".single .data-img").attr('src', $this.data-img).load(function () {
      $this.closest('.list').hide();    
   });
});
于 2013-01-05T16:39:17.563 に答える