Элемент, измеренный согласно его родному брату

Question

Допустим, у меня есть следующий HTML:

<div id="container">
    <img id="large-image" src="/img/large-image.jpg" />
    <img id="large-image-thumb" src="/img/large-image-thumb.jpg" />
</div>

Как сделать так, чтобы размер миниатюры соответствовал размеру изображения? Есть ли лучший способ структурировать это?

Функция этого состоит в том, чтобы обеспечить низкокачественную версию изображения во время загрузки полнофункциональной версии, где некачественная версия уже была загружена (таким образом, прогрессивные jpgs не помогают). Используется для отображения большого изображения при нажатии на миниатюру в галерее.

О, и я знаю ширину и высоту большого изображения до его загрузки, но я бы не стал устанавливать явный размер в javascript, если это возможно, - он должен масштабироваться, когда пользователь изменяет размер окна, если это возможно. Поймать событие resize() просто кажется грязным.

Answer 1

Древний (но все еще действующий) метод заключается в использовании атрибута LOWSRC тега IMG. Когда-то это использовалось в те времена, когда изображения загружались очень долго. Люди использовали его для версий с низким разрешением + с низкой палитрой, чтобы загружать быстро, в то время как полная версия загружалась после.

<img src="... big image ..." lowsrc="... same size but small file image ..." />

Answer 2

Меня немного смущает последняя часть вопроса: если изображение масштабируется относительно окна браузера, вы можете сделать то же самое для большого и маленького изображения;просто установите высоту или ширину на 100% (например), используя css.

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

В jQuery вы можете начать загрузку больших изображений после загрузки всей «нормальной» страницы, используя:

$(window).load(function() {
    large_image = new Image();
    large_image.src = "/img/large-image.jpg";
    // etc.

    // replace the source of the small image with the big image
    // you will need some additional code to check for the load event of the large images
});

Answer 3

С помощью jQuery вы можете сделать

var largew = $('#container').find('img').eq(1).width(),
    largeh = $('#container').find('img').eq(1).height();
$('#container').find('img').eq(0).css({
    height: largeh,
    width: largew
});

Изображение большого пальца будет иметь такой же размер, как и большое изображение. eq(0) ссылается на первое изображение, которое является большим пальцем, а eq(1) ссылается на второе изображение, которое является большим. Это предполагает, что они у вас есть в таком порядке внутри #container. Также вы должны использовать класс вместо идентификатора для ваших изображений. Это если вы планируете использовать те же имена на других изображениях. Вы можете использовать идентификатор только один раз в своем HTML, в отличие от класса, где он может применяться ко многим элементам HTML.

Проверьте рабочий пример http://jsfiddle.net/7j7kJ/