0

画像を動的に追加しますが、既存のdivに動的ソースを使用してimgタグを追加します。しかし、これらの画像のすべてが存在するわけではありません。私はそれらを非表示にしたいのですが、そうではありません。

load()を使用して、エラー時に非表示関数を設定できると思いますが、それらを追加するだけで、imgタグを作成するだけで、jqueryをそれに接続する方法がわかりません。

これが私の追加機能です:

function GetImages() {
            $('#ImageContainer').empty();
            $('#ImageContainer').css("visibility", "visible");

            var regex = new RegExp("(.+?);", "g");
            var match;
            while (match = regex.exec($("#<%= HttpSources.ClientID %>").val())) {
                $('#ImageContainer').append('<div class="ImgBox"><img src="' +
                    match[1].format($("#<%= ItemNo.ClientID %>").val()) + '" class="Image" /></div>');
            }

            return false;
        }

imgを含むdivを別のdivに追加します。

もともとはこういうことで隠したかったのですが、ドキュメントを読み込んだときにdivや画像が存在しないので、どうやって接続したらいいのかわかりません。

$(document).ready(function() {
    $(".ImgBox").Next(".Image").load(function () {
        // ... loaded  
    }).error(function () {
        // ... not loaded
        $(this).hide();
    });
});
4

2 に答える 2

1

編集:ブラウザがエラーイベントを適切にバブルしないことが判明しました。イベント バブリングは jQuery .live() 機能の背後にあるメカニズムであるため、バインドされたイベントは発生しません。

別の方法として、イベントを追加するときに、各要素 (または要素のセット) にイベントを添付することをお勧めします。


ページのロード時に存在しない要素にイベントを追加するには、 live() を使用します。

http://api.jquery.com/live/

例えば

$(".ImgBox").Next(".Image")
  .live("load", function () {
    // ... loaded  
  }).live("error", function () {
    // ... not loaded
    $(this).hide();
  });
于 2012-11-23T08:49:25.130 に答える
0

私は自分の質問に答えるのが嫌いですが、これが私が最終的に得たものです。

.live() はすばらしく聞こえましたが、残念ながら、img のロード/エラーでは機能しません。

代わりに、これを見つけました: http://www.sajithmr.me/javascript-check-an-image-is-loaded-or-not これは、画像がロードされているかどうかを確認する方法を提供してくれるようです。すべての画像を追加したら、それらを実行して、読み込まれていない画像をクリーンアップします。

于 2012-11-23T10:24:41.357 に答える