Ожидание загрузки картинки

@ruslan13 · Регистрация: 15.04.2016

Студворк — интернет-сервис помощи студентам

У меня есть картинка с текстовым оверлеем

HTML5
1
2
3
4
<div class="image-overlay">
    <img src="http://borpost.ru/wp-content/uploads/2016/02/bg1.png" class="example_beauty" />
    <span class="io-title">Депутаты горсовета согласовали ключевые назначения в мэрии</span>
</div>

Размеры картинки непостоянны.
Проблема в том, что пока картинка не загрузится, текст показывается на части экрана. Как спрятать текст до показа картинки?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.image-overlay {
    display:inline-block;   
    position:relative;
}
 
.image-overlay:after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(33, 33, 33, 0.48) 8%,rgba(33, 33, 33, 0.47) 10%,rgba(0,0,0,0.02) 39%,rgba(0,0,0,0) 40%);
 
 
.image-overlay span {
    color: white;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
    padding: 30px 10%;
    margin: 0;  
}

@golosalex · 31.03.2018, 23:48

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

@ruslan13 · 01.04.2018, 05:23 **[ТС]**

код почти весь
Да я уже сделал, нужно javascript подключить

HTML5
1
<img src="image.jpg" onload='$(this).closest(".image-overlay").css("display", "initial");' />

И изначально у <div class="image-overlay"> display:none;

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@golosalex 151 / 135 / 29 Регистрация: 02.07.2013 Сообщений: 973
	31.03.2018, 23:48
	не могли бы вы выложить значительный кусок кода и яснее описать проблему? хотябы опишите что хотите сделать или лучше нарисуйте... 0