Сделайте пустой контейнер того же размера, что и другой контейнер с дочерним изображением, используя JS
Неправильный размер: Вот как это выглядит при загрузке:
Правильный размер: Вот как это выглядит при изменении размера окна:
ССЫЛКА НА ПРОЕКТ Вот справочная ссылка: https://wp.xingapps.win/
Инструкции: Наведите указатель мыши на черную кнопку «Купить 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 пикселей.
да, «при загрузке» должно быть покрыто это, хотя .. Также это последнее, что уже загружено в дом (скрипт)
Нет, под нагрузкой именно так. Сама страница как документ, но она зависит от ресурсов, не являющихся частью страницы. То, что вы видите, фактически представляет собой текстовый файл, интерпретируемый как изображения, стили и т. д. и т. д. из парсеров в браузере. Страница загружена как текстовый документ (HTML — это текстовый документ) не обязательно означает, что 500 HTTP-запросов, которые вы будете делать для изображений, шрифтов, CSS, JS и т. д., будут в это время. Для дешевого, действительно дерьмового взлома, setTimeout(() => { // resizing in here }, 0) должен сделать это.
Если я установлю тайм-аут на любое число от 0 до 500, код работает, но не решает мою проблему. Если я устанавливаю тайм-аут на 600+, он вообще не работает.
Привет, ребята! Я сделал скрипт JS здесь: jsfiddle.net/nLv0xt52/1/встроенный/результат У которого та же проблема.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновлено: попробуйте использовать resizeDiv(), когда пользователь открывает/наводит/щелкает меню, например:
Нравиться:
$(".quadmenu-dropdown-toggle").on({
mouseenter: function (e) {
resizeDiv();
},
click: function(){
resizeDiv();
}
});
Или используйте «неправильный путь» с setTimeout, как упоминалось в @ggdx.
И предложение тайм-аута ggdx, и этот ответ, к сожалению, у меня не работают.
Это блестящий подход. Однако он все еще не работает. Должно быть что-то еще не так =/ он захватывает размер, но это просто неправильный размер. Сбивает с толку.
Я сделал скрипт JS здесь: jsfiddle.net/nLv0xt52/1/встроенный/результат У которого та же проблема.
Кажется, это работает в вашей скрипке, не так ли? Единственное, что ломается, это многострочный текст на моем экране.
Вероятно, он рассчитывается до того, как страница завершит рендеринг, то есть до того, как изображения загрузятся. Вам нужно запустить событие после того, как страница фактически полностью отобразится, с вашим повторным дрожанием в качестве обратного вызова.