使用JS

时间:2019-05-22 19:50:35

标签: javascript jquery

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

enter image description here



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

enter image description here



项目链接:以下是参考链接: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像素的屏幕宽度上

1 个答案:

答案 0 :(得分:0)

编辑:当用户打开/悬停/单击菜单时,尝试使用resizeDiv(),例如:

赞:


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