使用JS

Question

大小不正确：加载时的外观如下：

正确的大小：这是调整窗口大小时的外观：

项目链接：以下是参考链接：https://wp.xingapps.win/

说明：将鼠标悬停在顶部导航中的“ Shop Ejuice”黑色按钮上，您将看到红色框。这些红色框应与第一个图像的高度匹配，但不能匹配。

故事：：我在尝试减少页面上的图像请求量时遇到问题。我有一个图像网格。与其加载所有高度和宽度均相同的图像，不如加载第一张图像，而其他图像将是与第一张图像的高度和宽度匹配的<div>。然后，我将CSS Sprite背景图像应用于这些div，以便它们显示为普通图像。这样可以减少页面上的请求数量！

问题：：当我调整浏览器大小时，我的示例代码正在运行-它将完全匹配源图像的高度。但是，在初始载荷下，高度和宽度不正确。由于某种原因，它比应该的要小一些。在我调整窗口大小之前不固定。我该如何解决？

代码：

(function($){
/* Match Quad Menu Div Height to one image */
var imgContainer = $('.mad-hat-parent-menu .quadmenu-product-float'),
    sourceImg = $('li#menu-item-15959 span.quadmenu-item-content');

function resizeDiv () {
    imgContainer.height(sourceImg.width());
    imgContainer.width(sourceImg.width());
}

$(window).on("load resize", function() { resizeDiv(); });

})(jQuery);

注意：（我实际上是在针对第一个图像的容器而不是图像本身）

另外，这个问题很难确定您是否在小于1650像素的屏幕宽度上。

Answer 1

编辑：当用户打开/悬停/单击菜单时，尝试使用resizeDiv（），例如：

赞：

$(".quadmenu-dropdown-toggle").on({
    mouseenter: function (e) {
      resizeDiv();
    },
    click: function(){
      resizeDiv();
    }
});