Есть скрипт, который должен имитировать background-size: cover
при работе с img в произвольном блоке. Скрипт высчитывает соотношение сторон блока-обертки и самого изображения, сравнивает их и, в зависимости от результата, наделяет картинку css-свойствами. Если картинка "горизонтальней" блока, она заполняет его по высоте, а если "вертикальней" - по ширине.
Скрипт:
function flexImage() {
var args = [].slice.call(arguments);
for (let i = 0; i < args.length; i++) {
$(args[i]).each(function() {
let wrapper = $(this),
image = $(this).find('img');
if ( (image.height() / image.width()) < (wrapper.height() / wrapper.width()) ) {
image.css({
"height":"100%",
"width":"auto",
"max-width":"inherit",
});
} else {
image.css({
"height":"auto",
"width":"100%",
"max-width":"100%",
});
}
});
}
}
$(window).on('load', function() {
flexImage('.post-mini > article', '.slider-thumbnail', 'article.review .post-thumbnail');
});
Проблема в том, что скрипт по-разному работает при обновлении страницы и при переходе на нее с другой. Если обновить страницу, изображения ведут себя так, как задумывалось. Если же перейти на страницу, скажем, по ссылке в меню, то некоторые изображения (всегда одни и те же) отображаются неправильно. Причем, скрипт все равно отрабатывает, но дает им не те свойства, как если бы они были с другими height
/width
. Это происходит вот на этой странице. Если перейти туда по ссылке, то можно увидеть, как около картинок в миниатюрах остаются пустые пробелы. Но если страницу обновить, они пропадут.
Еще интересней здесь - в блоке "отзывы" миниатюры при обновлении страницы отображаются по-разному. Одна аватарка при обновлении поочередно принимает то одни, то другие свойства из скрипта. Вторая ведет себя стабильней, но иногда тоже дает сбой.
Кстати, скрипт тестировался на локальном сервере и вел себя как порядочный js. А вот при запуске в "живом" интернете происходит вот такое.
upd: исправил код в соответствии с подсказкой Perfecto Web, однако проблема осталась.
upd 2: проблема была в pagespeed. Вопрос решен
Вытащите $(window).on('load', function() {
из цикла, и никогда такого не делайте. :) Поставьте его до выполнения скрипта, если хотите, чтобы скрипт запустился после загрузки страницы.
function flexImage() {
var args = [].slice.call(arguments);
for (let i = 0; i < args.length; i++) {
$(args[i]).each(function() {
let wrapper = $(this),
image = $(this).find('img');
if ( (image.height() / image.width()) < (wrapper.height() / wrapper.width()) ) {
image.css({
"height":"100%",
"width":"auto",
"max-width":"inherit",
});
} else {
image.css({
"height":"auto",
"width":"100%",
"max-width":"100%",
});
}
});
}
}
$(window).on('load', function() {
flexImage();
});
Попробуйте обертку $(window).on('load', function() {}) убрать, а скрипт подключить так:
<script src="script .js" defer></script>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
На сайте 4 страницы идентичны, а главная отличается, вот на ней и не работает magnific-popup, на странице форму не скрывает, при клике не отображаетНа...
Не могу понять в чем делона странице Списка контактов в joomla 3 не работает bootsrap
Мне нужно что бы программа могла выводить сообщение (и не только) даже когда свёрнута(Выводит только когда открыта и активна форма) Код:
Можно ли сделать RowDetails в DataGrid растягивающимся снизу и как? Или использовать не DataGrid? В какую сторону смотреть?