0

ページに画像を動的に追加します。

<div class="simple_overlay" id="overlay">
   <img src="" />
</div>

<script type="text/javascript">
$(function() {
    $("a[rel]").overlay({
        var source = this.getTrigger().attr('href');
        this.getOverlay().find("img").attr({'src': source});
    });
});
</script>

ここで、新しい画像の幅を取得し、margin-leftそれに対応する計算を行う必要があります。オーバーレイが読み込まれているときに画像がまだ読み込まれておらず、コンテナーの#overlay幅が 0 であるため、ネイティブの jQuery ツール メソッドは機能しません。このチェーンでコールバックをエミュレートするオプションはありますwidth()かattr()?

4

1 に答える 1

0

次のように imagesloadイベント( と混同しないでくださいwindow.load) を使用します。

$("a[rel]").overlay({
    var source = this.getTrigger().attr('href');
    this.getOverlay().find("img").one('load', function() {
      //run your code here, the image is loaded and is "this"
    }).each(function() {
      if (this.complete) $(this).load(); //trigger load, handles from cache cases
    }).attr({'src': source});
});

これは.one()、コードを 1 回だけ実行するために使用します。その画像が読み込まれるとloadイベントが発生します...しかし、これはキャッシュから読み込むときに常に発生するとは限りません (ブラウザによって異なります) 。ブラウザがキャッシュからロードしてイベントを発生させた場合...それも問題ありません。コードはすべての場合に1回実行されます:).each().one()

于 2010-06-30T12:25:38.900 に答える