jQuery изменяет размер всех изображений в документе, готовом по классу - PullRequest
Новая
       14

jQuery изменяет размер всех изображений в документе, готовом по классу

1 голос
/ 19 марта 2012

У меня есть страница с изображениями, размер которой я хочу изменить (путем получения определенных классов CSS) для документа, готового с использованием jQuery.Изображения имеют начальный «.test», который не имеет атрибутов в файле CSS.Я знаю, как дать им новые классы, чтобы их можно было изменить.Но я хочу изменить размер в зависимости от ширины или высоты, чтобы все они могли выглядеть одинаково.

Моя проблема в том, что я не могу получить их ширину / высоту для продолжения.Мой код такой: 

$(document).ready(function(){

    $('.test').each(function(){
        var img_width = $(this).width();
        var img_height = $(this).height();
        alert("My width:" + img_width + "px, My Height: " + img_height + "px");

        if (img_width > img_height)
        {
            //resize to height
        }else{
            //resize to width
        }
    });
})

Предупреждение, которое я имею перед оператором if, всегда возвращает 0 - хотя оно действительно появляется правильное число раз.

Я также пытался получить ширину (итакже высота) с $(this).width; и $(this).offsetHeight; и $(this).attr('width');, но когда результат не равен 0, это undefined.

Что я делаю не так?

Ответы [ 4 ]

3 голосов
/ 19 марта 2012

Использовать 

$(window).load(function() {

вместо 

$(document).ready(function(){

Событие загрузки запускается чуть позже, когда все изображения фактически загружены.

useМетод jQuery .load () для прикрепления обработчиков событий загрузки к окну или к более конкретным элементам, например к изображениям.

Источник: http://api.jquery.com/ready/

1 голос
/ 19 марта 2012

Вы также можете проверить SLIR: https://github.com/lencioni/SLIR

1 голос
/ 19 марта 2012 
$(document).ready(function(){

    $('.test').load(function(){
        var img_width = $(this).width();
        var img_height = $(this).height();
        alert("My width:" + img_width + "px, My Height: " + img_height + "px");

        if (img_width > img_height)
        {
            //resize to height
        }else{
            //resize to width
        }
    });
})
0 голосов
/ 19 марта 2012

Я тоже столкнулся с этой проблемой некоторое время назад.Проблема в том, что изображения еще не загружены полностью.

Однако я бы посоветовал НЕ делать это таким образом.Загрузка большой картинки, а затем изменение ее размера на стороне клиента - не очень хороший метод.Вы должны изменить его размер на стороне сервера, чтобы пользователям не приходилось загружать большие изображения без использования.

Вам следует взглянуть на phpThumb, отличный класс PHP, который изменяет размеры и кэширует изображения для вас.Это отличный инструмент и гораздо лучший способ достичь этого.

...