Как изменить размер всеx изображений в JQuery?

Question

[Baxterok]

Здравствуйте. Ну могу изменить размер всех изображений с id="img-size" на странице. Меняется размер только в первой картинки с данным id. Как изменить размер для всех изображений, а не только для первой?

Answer 1

[Сергей Протько]

всех изображений с id="img-size"

id - уникальный идентификатор. По хорошему у вас должен быть один элемент на всю страницу с таким id. Я бы рекомендовал вам завязывать селекторы либо на классы, либо, что еще лучше - на data-* атрибуты.

$('img[data-resize]').css({width: 'value', height: 'value'}); // либо по отдельности каждый через each.

Comments

[Baxterok]

А как можно сделать чтобы для каждой картинки выставлялся свой размер? Например для широких выставлялась высота, а для высоких - ширина.

[Сергей Протько]

проходить через each и смотреть на каждый элемент. Есть маленькое но - для надежности было бы неплохо до ресайза подождать пока картинки догрузятся.

На самом деле это тот еще геморой.

[Baxterok]

@Fesor да я уже заметил? Чтобы подождать нужно ready с начала прописывать?

[Сергей Протько]

ready вызывается когда браузер достроил DOM дерево. Картинки к тому моменту могут еще не догрузиться. С другой стороны есть load, но он будет ждать когда загрузится вообще все. Я как-то писал схожую штуку, у меня выходила ситуация при которой в момент запуска скрипта половина нужных мне изображений уже загрузилась, а другая вот вот должна была загрузиться. load же срабатывал еще через пару секунд. В итоге написал что-то такое:

$('img[data-resize]').css({width: 'value', height: 'value'}); // либо по отдельности каждый через each.

function processImage(e) {
    var img = $(this);
    // меняем размеры и работаем с картинкой
}

// функция проверяющая статус картинки, загружена или нужно ли ждать
function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.

    if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

$('img[data-resize-logic]').each(function(){
    // проверяем, может картинка уже загружена?
    if (IsImageOk(this)) {
         processImage.call(this);
    } else {
        $(this).on('load', processImage);
    }
});

[Сергей Протько]

сори, первый экземпл скопипастился случайно.

[Baxterok]

@Fesor Спасибо большое за лекцию.