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

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

4 голосов
/ 17 ноября 2011

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

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

Ответы [ 4 ]

3 голосов
/ 17 ноября 2011

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

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

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

1 голос
/ 16 декабря 2013

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

<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 (и background-size: cover или содержит). Это позволит избежать трюка с позицией, трюка с переполнением, и много работы для браузера.

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

1 голос
/ 17 ноября 2011

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

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

0 голосов
/ 24 марта 2012

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

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

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

Надежда, которая помогает

...