Используя Python 2, вызывая .lower()
для каждой строки или Unicode-объекта ...
string1.lower() == string2.lower()
... будет работать большую часть времени, но на самом деле не работает в ситуации @tchrist описал .
Предположим, что у нас есть файл с именем unicode.txt
, содержащий две строки Σίσυφος
и ΣΊΣΥΦΟΣ
. С Python 2:
>>> utf8_bytes = open("unicode.txt", 'r').read()
>>> print repr(utf8_bytes)
'\xce\xa3\xce\xaf\xcf\x83\xcf\x85\xcf\x86\xce\xbf\xcf\x82\n\xce\xa3\xce\x8a\xce\xa3\xce\xa5\xce\xa6\xce\x9f\xce\xa3\n'
>>> u = utf8_bytes.decode('utf8')
>>> print u
Σίσυφος
ΣΊΣΥΦΟΣ
>>> first, second = u.splitlines()
>>> print first.lower()
σίσυφος
>>> print second.lower()
σίσυφοσ
>>> first.lower() == second.lower()
False
>>> first.upper() == second.upper()
True
Символ Σ имеет две формы в нижнем регистре, ς и σ, а .lower()
не поможет сравнивать их без учета регистра.
Однако, поскольку из Python 3 все три формы будут разрешены для ς, и вызов lower () для обеих строк будет работать правильно:
>>> s = open('unicode.txt', encoding='utf8').read()
>>> print(s)
Σίσυφος
ΣΊΣΥΦΟΣ
>>> first, second = s.splitlines()
>>> print(first.lower())
σίσυφος
>>> print(second.lower())
σίσυφος
>>> first.lower() == second.lower()
True
>>> first.upper() == second.upper()
True
Итак, если вы заботитесь о краевых случаях, таких как три сигмы на греческом языке, используйте Python 3.
(Для справки, Python 2.7.3 и Python 3.3.0b1 показаны в распечатках интерпретатора выше.)
Вместо прямого ссылки на изображение, вставьте его в DIV, как показано ниже:
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
Затем в вашем CSS:
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
Единственное, что я могу придумать, чтобы свести к минимуму эффект перехода на ваш текст, - это установить min-height
, где будет отображаться изображение, я бы сказал, - установите его на «более короткое» изображение, о котором вы знаете. Таким образом, скачок будет менее очевидным, и вам не нужно будет использовать lazyLoad или так ... Однако это не полностью устраняет вашу проблему.
Есть действительно простая вещь, чтобы проверить, прежде чем вы начнете смотреть на ленивую загрузку и другие JS. Убедитесь, что загруженные изображения JPG сохранены с включенной опцией «progressive»! Это приведет к тому, что они будут загружать изображение итеративно, начиная с замещающего, который будет с низким разрешением и быстрее загружаться, а не ждать самых высоких данных res перед рендерингом.
Имейте в виду - ответы выше, которые рекомендуют использовать фоновый подход div, изменят семантику вашего изображения, превратив его из img в div. Это приведет к таким вещам, как отсутствие индексации этих изображений поисковым искателем, задержка загрузки этих изображений браузером (если вы явно не загружаете их) и т. Д.
Решение этой проблемы (хотя не используется div фоновый подход) состоит в том, чтобы иметь обертку div для вашего изображения и добавлять к ней верхнюю часть на основе соотношения сторон изображения, которое вам нужно знать заранее. Ниже код будет работать для изображения с соотношением сторон 2: 1 (высота составляет 50% от ширины)
<div style="width:100%;height:0; padding-top:50%;position:relative;">
<img src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>
Конечно, основным недостатком этого подхода является то, что вам нужно знать соотношение сторон изображение заранее.
Вот один наивный способ сделать это,
img {box-shadow: 0 0 10px 0 rgba (# 000, 0.1); }
blockquote>Вы можете манипулировать значениями, но то, что он делает, создает очень легкую рамку вокруг изображения, которое не подталкивает содержимое.
Надеюсь, что это поможет
Это очень просто .. Этот сценарий позволяет загружать фотографию профиля, которая по умолчанию создает образ места. Вы можете загрузить фоновое изображение multi css в элемент. Когда аватар фото сбой, изображение-заполнитель появляется по умолчанию для div.
Если вы используете элемент div, который загружается через css-фоновое изображение, вы можете использовать этот стиль:
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>