Question

我在Wordpress上使用A3延迟加载插件来仅加载视口中的图像。

除了我运行的下拉菜单外，这对大多数网站都有效。

下拉菜单是一个大型菜单，当将鼠标悬停在各个子菜单链接上时可以使用。这将打开包含图像的子下拉菜单。我已将data-src手动添加到图像，但是当悬停在链接上时，图像不会显示。

我认为我需要添加一些额外的功能来处理此问题，并在将鼠标悬停在子链接上时触发lazyload事件，但是我在包含手动事件的文档中找不到任何内容。

我用于菜单的代码是：

var $menu = $(".menu");
// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
    activate: activateSubmenu,
    deactivate: deactivateSubmenu
});
// jQuery-menu-aim: </meaningful part of the example>

// jQuery-menu-aim: the following JS is used to show and hide the submenu
// contents. Again, this can be done in any number of ways. jQuery-menu-aim
// doesn't care how you do this, it just fires the activate and deactivate
// events at the right times so you know when to show and hide your submenus.
function activateSubmenu(row) {
    var $row = $(row),
        submenuId = $row.data("submenuId"),
        $submenu = $("#" + submenuId),
        height = $menu.outerHeight(),
        width = $menu.outerWidth();

    // Show the submenu
    $submenu.css({
        display: "block",
        top: -1,
        left: width - 3,  // main should overlay submenu
        height: height - 4  // padding for main dropdown's arrow
    });

    // Keep the currently activated row's highlighted look
    $row.find("a").addClass("maintainHover");
}

function deactivateSubmenu(row) {
    var $row = $(row),
        submenuId = $row.data("submenuId"),
        $submenu = $("#" + submenuId);

    // Hide the submenu and remove the row's highlighted look
    $submenu.css("display", "none");

    $row.find("a").removeClass("maintainHover");
}

我猜想我需要在activateSubmenu函数中添加一些内容。有人知道如何做到这一点吗？

带有下拉菜单的A3 lazyload javascript无法加载图像

0 个答案: