При загрузке страницы скрипт ведет себя по-разному

206
12 октября 2018, 16:50

Есть скрипт, который должен имитировать 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. Вопрос решен

Answer 1

Вытащите $(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(); 
});

Answer 2

Попробуйте обертку $(window).on('load', function() {}) убрать, а скрипт подключить так:

<script src="script .js" defer></script>
READ ALSO
Magnific-popup не работает на одной странице

Magnific-popup не работает на одной странице

На сайте 4 страницы идентичны, а главная отличается, вот на ней и не работает magnific-popup, на странице форму не скрывает, при клике не отображаетНа...

193
Uncaught TypeError: Cannot read property &#39;fn&#39; of undefined после использования bootstrap.min.js

Uncaught TypeError: Cannot read property 'fn' of undefined после использования bootstrap.min.js

Не могу понять в чем делона странице Списка контактов в joomla 3 не работает bootsrap

260
Как сделать что бы программа свёрнутая в трей выводила сообщение

Как сделать что бы программа свёрнутая в трей выводила сообщение

Мне нужно что бы программа могла выводить сообщение (и не только) даже когда свёрнута(Выводит только когда открыта и активна форма) Код:

200
C# WPF DataGridRowDetails

C# WPF DataGridRowDetails

Можно ли сделать RowDetails в DataGrid растягивающимся снизу и как? Или использовать не DataGrid? В какую сторону смотреть?

210