0

我很抱歉不知道如何问这个问题，但是，就这样吧。

我有一个图像滑块，它只在需要时加载图像，所以当页面加载时它们并不都存在于 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>

一旦看到加载的图像，我就尝试使用 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);

提前致谢！

4

1 回答 1

1

由于您的幻灯片库正在添加和删除imgDOM 中的节点，因此您可以使用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 ?");
            }
        });
    }
}
于 2013-10-28T08:03:12.770 回答