大小不正确:加载时的外观如下:
正确的大小:这是调整窗口大小时的外观:
项目链接:以下是参考链接: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像素的屏幕宽度上。
答案 0 :(得分:0)
编辑:当用户打开/悬停/单击菜单时,尝试使用resizeDiv(),例如:
赞:
$(".quadmenu-dropdown-toggle").on({
mouseenter: function (e) {
resizeDiv();
},
click: function(){
resizeDiv();
}
});