Javascript 当另一个元素可见时，在页面加载后更新该元素

很抱歉，我不知道该怎么问这个问题，但是，问题来了

我有一个图像滑块，它只在需要时加载图像，因此在加载页面时，它们并不都存在于dom中。说到这里，我需要编写一个条件，根据某个图像在页面上何时可见来显示元素。问题是，当加载页面时，DOM中不存在照片，因此我无法使用jQuery来处理这一问题。有人知道我需要做什么来完成这件事吗

这是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>

---

提前谢谢

由于您的幻灯片库正在DOM中添加和删除

img

节点，因此您可以使用侦听这些更改并检查您感兴趣的事件（即使用

src=”添加
img
节点）http://example.com/images/HOME_PAGE/1.jpg“

）

示例代码：
（基于at的html结构）

var imgToLookFor=”http://example.com/images/HOME_PAGE/1.jpg";
var parentNodeToWatch=document.querySelector（“#jbArticle”）；
//创建一个观察者实例
var观察者=新的突变观察者（功能（突变）{
forEach（checkForImage）；
});
//开始观察父节点并
//它的后代需要改变
观察者观察（parentNodeToWatch{
“儿童名单”：对，
“子树”：正确
});
//检查MutationRecords以检测何时添加图像
函数checkForImage（变异）{
if（mutation.addedNodes&&（mutation.addedNodes.length>0））{
//在添加节点的地方，让我们逐个检查它们
[].slice.call（mutation.addedNodes）.forEach（函数（节点）{
if（（node.nodeName==“IMG”）&&node.src
&&（node.src==imgToLookFor））{
警惕（“不要只是看着我！\n”
+“做点什么，好吗？”）；
}
});
}
}

是否尝试使用body.onload、document.ready、image.onload？图像的Onload操作您需要在创建图像后立即附加。您需要向我们提供更多信息，即更详细地描述您当前的设置、要求和问题。我已更新，对此表示抱歉@ExpertSystem@fentech：加载图像的代码在哪里？（顺便说一句，将CSS放在一个文件中，而不是使用内联样式（即

样式

标记）。@ExpertSystem是我用于joomla的扩展的一部分，我所有的个人样式都在CSS文件中

(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);

var imgToLookFor = "http://example.com/images/HOME_PAGE/1.jpg";
var parentNodeToWatch = document.querySelector("#jbArticle");

// Create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(checkForImage);
});

// Start observing the parent node and 
//its descendants for <childList> changes
observer.observe(parentNodeToWatch, {
    "childList": true,
    "subtree": true
});

// Check MutationRecords to detect when our image is added
function checkForImage(mutation) {
    if (mutation.addedNodes && (mutation.addedNodes.length > 0)) {
        // There where nodes added, lets check them out one-by-one
        [].slice.call(mutation.addedNodes).forEach(function(node) {
            if ((node.nodeName == "IMG") && node.src
                    && (node.src == imgToLookFor)) {
                alert("Don't just look at me !\n"
                      + "Do something, will ya ?");
            }
        });
    }
}