javascript - 別の要素が表示されているときにページの読み込み後に要素を更新する

Question

この質問をする方法が正確にわからないことをお詫びしますが、ここに行きます。

必要なときにのみ画像を読み込む画像スライダーがあるため、ページが読み込まれたときにすべてが dom に存在するわけではありません。特定の画像がページに表示されるタイミングに基づいて要素を表示する条件を記述する必要があると言いました。問題は、ページがロードされたときに写真がDOMに存在しないため、jQueryを使用してこれを処理できないことです。これを行うために私が何をする必要があるか知っている人はいますか？

<img src="http://example.com/images/HOME_PAGE/1.jpg">ロードされるのをリッスンしようとしているhtmlは次の とおりです。

<div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
  <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 0; -webkit-transition: none; transition: none; z-index: 0; width: 1038px; height: 575px;">
    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
    <img src="http://example.com/images/HOME_PAGE/2.jpg" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1038px; height: 583px; position: absolute; top: -4px; left: 0px;" width="1038" height="583">
  </div>
  <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1038px; height: 575px; -webkit-transition: none; transition: none; z-index: 1;">
    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
    <img src="http://example.com/images/HOME_PAGE/1.jpg" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1038px; height: 583px; position: absolute; top: 0px; left: 0px;" width="1038" height="583">
  </div>
</div>

画像が読み込まれたことを確認したら、jQuery を使用して「再生ボタン」オーバーレイを追加しようとしましたが、ページの読み込み後にすべての画像が読み込まれるため、明らかに問題が発生しています。

画像をロードする JS は次のとおりです。

(function (a) {
    Galleria.addTheme({
        name: "classic",
        author: "Galleria",
        css: "galleria.classic.css",
        defaults: {
            transition: "slide",
            thumbCrop: "height",
            _toggleInfo: !0
        },
        init: function (b) {
            Galleria.requires(1.25, "This version of Classic theme requires Galleria 1.2.5 or later"), this.addElement("info-link", "info-close"), this.append({
                info: ["info-link", "info-close"]
            });
            var c = this.$("info-link,info-close,info-text"),
                d = Galleria.TOUCH,
                e = d ? "touchstart" : "click";
            this.$("loader,counter").show().css("opacity", .4), d || (this.addIdleState(this.get("image-nav-left"), {
                left: -50
            }), this.addIdleState(this.get("image-nav-right"), {
                right: -50
            }), this.addIdleState(this.get("counter"), {
                opacity: 0
            })), b._toggleInfo === !0 ? c.bind(e, function () {
                c.toggle()
            }) : (c.show(), this.$("info-link, info-close").hide()), this.bind("thumbnail", function (b) {
                d ? a(b.thumbTarget).css("opacity", this.getIndex() ? 1 : .6) : (a(b.thumbTarget).css("opacity", .6).parent().hover(function () {
                    a(this).not(".active").children().stop().fadeTo(100, 1)
                }, function () {
                    a(this).not(".active").children().stop().fadeTo(400, .6)
                }), b.index === this.getIndex() && a(b.thumbTarget).css("opacity", 1))
            }), this.bind("loadstart", function (b) {
                b.cached || this.$("loader").show().fadeTo(200, .4), this.$("info").toggle(this.hasInfo()), a(b.thumbTarget).css("opacity", 1).parent().siblings().children().css("opacity", .6)
            }), this.bind("loadfinish", function (a) {
                this.$("loader").fadeOut(200)
            })
        }
    })
})(jQuery);

前もって感謝します！