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

@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;

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

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