Жидкие изображения в Chrome: как избежать перерисовки?

Я работаю над сайтом фотографий с большим количеством изображений, и у них нет фиксированной высоты и ширины, так как я хочу, чтобы этот сайт был на 100% плавным: как вы справляетесь с уродливым перекрашиванием изображений в Chrome? (т. е. изображения сначала отображаются с нулевой высотой, а затем масштабируются до их окончательного размера, перемещаясь по всему макету)

Я перепробовал почти все, и мой последний вариант — скрыть перерисовку изображения с помощью черного div, а затем установить его непрозрачность на 0, когда изображения закончат загрузку (кстати, я пробовал это с вызовом (document).ready, но кажется слишком рано: как бы вы это сделали?)


google-chrome css height fluid-layout repaint
person teolives    schedule 17.11.2011    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Укажите атрибут высоты и ширины вашего изображения / его размеры.

<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">

Это помогает браузеру избежать второго прохода для макета вашей страницы, а также оптимизирует загрузку страницы! :)

person Zhianc    schedule 17.11.2011
comment
Вот я бы тоже так сделал. Это делает пустое пространство перед визуализацией изображения правильного размера. - person jimplode; 17.11.2011
comment
Ну, это в значительной степени противоречит цели иметь гибкие изображения! - person teolives; 17.11.2011
comment
@teolives не забудьте отметить это как свой ответ, если это решило вашу проблему. Благодарность! - person Zhianc; 23.11.2011

arrow_upward
1
arrow_downward

Chrome (или любой браузер на самом деле) не может избежать этой «перерисовки», поскольку они заранее не знают, какого размера будут ваши изображения.

Таким образом, вам нужно будет явно указать размеры ваших изображений либо в самих свойствах ширины и высоты изображения, либо с помощью CSS.

person Willem Mulder    schedule 17.11.2011
comment
Я не согласен, только браузеры webkit, кажется, начинают с 0 высоты во время рендеринга: FF, IE, Opera, все сохраняют место для изображений без изменения масштаба всего макета. - person teolives; 17.11.2011

arrow_upward
1
arrow_downward

Я знаю, что опоздал более чем на два года, но как насчет предложенной практики здесь?

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</div>


.embed-container {
    position: relative;   
    height: 0;
    overflow: hidden;
    background-color:black;  
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* ... */

Кроме того, важное замечание из раздела комментариев, на которое следует обратить внимание и улучшить исходную технику:

Хороший трюк. Однако на вашем месте я бы заменил тег «img» на фоновое изображение в вашем div (и размер фона: обложка или содержание). Это позволит вам избежать трюка с положением, трюка с переполнением и большой работы для браузера.

Я надеюсь, что кто-то найдет это полезным.

person pilau    schedule 16.12.2013

arrow_upward
0
arrow_downward

Это сложно проверить, но вы можете попробовать установить ширину/высоту в CSS.

img {display: block; width: 100%; height: auto;}

если вы хотите, чтобы изображения были на всю ширину. Это может предотвратить перерисовку всей страницы, но, конечно, перерисовка будет происходить независимо от загрузки изображений. Вы также можете выяснить, что происходит с Chrome --show-paint-rects.

надеюсь, это поможет

person Oli Studholme    schedule 24.03.2012