Question

我为不知道如何提出这个问题道歉，但是，现在就这样了。

我有一个图像滑块，只在需要时加载图像，因此在加载页面时它们并不都存在于dom中。话虽如此，我需要编写一个条件，根据某个图像何时在页面上可见而显示一个元素。问题是因为当页面加载时，DOM中没有照片存在我无法使用jQuery为我处理这个问题。有谁知道我需要做些什么才能完成这项工作？

这是html，我试图收听<img src="http://example.com/images/HOME_PAGE/1.jpg">加载：

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

一旦我看到图片已加载，我就试图添加一个＆＃34;播放按钮＆＃34;使用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);

提前致谢！

Answer 1

由于您的幻灯片库是在DOM中添加和删除img个节点，因此您可以使用 MutationObserver 来监听这些更改，并检查您感兴趣的事件（即使用img添加src="http://example.com/images/HOME_PAGE/1.jpg"节点。

示例代码：
（基于thisisvisual.com处的html结构）

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 ?");
            }
        });
    }
}

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

1 个答案: