Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2016, 12:03
Новичок на форуме
Отправить личное сообщение для Skrip Посмотреть профиль Найти все сообщения от Skrip
 
Регистрация: 19.06.2016
Сообщений: 4

преждевременно отрабатывает image.onload
Здраствуйте увожаемые форумчане.
Столкнулся с такой проблемой:
Есть простенький скриптик который должен делать следующее:
1. Отображать некое изображение
2. Фоном подгружать второе изображение(большего размера)
3. При загрузке второго изображения подменять первое на второе
Вродебы все просто, собственно сам скрипт:

container = document.createElement('div') // создаем контейнер в котором будем подменять изображения
img1=document.createElement('img');
img1.src='1.jpg';
container.appendChild(img);
//первое изображение отображаем сразу

Img2=document.createElement('img');
Img2.onload=onLoadEventHandles();
Img2.src='2.jpg';
 //второму вешаем обработчик на загрузку

function onLoadEventHandles()
{
    container.innerHTML='';
    container.appendChild(Img2);
}
// после загрузки удаляем первое изображение и отображаем второе


Однако событие отрабатывает сразу, и я наслаждаюсь картиной построчной прогрузки изобраения.

Сразу оговорюсь, работаю над этим скриптом на локальном сервере, для имитации медленой сети использую встроеный в Cromium "эмулятор GPRS"

Собственно я вижу сдесь несколько вариантов:
1. Это тонкости работы "'эмулятора GPRS"
2. Я чегото не понимаю в механизме работы события 'load'
3. Я дурак и наделал глупых ошибок и не в состоянии найти их самостоятельно

Ктонибудь сталкивался с подобным? Есть идеи как это лечить?

Зарание благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2016, 12:14
Аватар для Botik21
Аспирант
Отправить личное сообщение для Botik21 Посмотреть профиль Найти все сообщения от Botik21
 
Регистрация: 01.06.2016
Сообщений: 87

Img2 = document.createElement('img');
Img2.addEventListener('load', function(e) {
  container.removeChild(img1);
  container.appendChild(this);
});
Img2.src = '2.jpg';
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2016, 14:09
Новичок на форуме
Отправить личное сообщение для Skrip Посмотреть профиль Найти все сообщения от Skrip
 
Регистрация: 19.06.2016
Сообщений: 4

пробовал, результат тот же, в принципе без разницы как я вешаю событие через onload, addEventListener, или атрибутом HTML результаты теже.
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2016, 14:21
Новичок на форуме
Отправить личное сообщение для Skrip Посмотреть профиль Найти все сообщения от Skrip
 
Регистрация: 19.06.2016
Сообщений: 4

Решил, нужно было обернуть вызов onLoadEventHandles() в анонимную функцию.
Получалось что я вешал в качестве обработчика результат выполнения функции а не саму функцию.

Последний раз редактировалось Skrip, 19.06.2016 в 14:32.
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2016, 14:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Skrip
нужно было обернуть вызов onLoadEventHandles() в анонимную функцию.
Сообщение от Skrip
Img2.onload=onLoadEventHandles();
уберите просто круглые скобки
Ответить с цитированием
  #6 (permalink)  
Старый 19.06.2016, 15:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Skrip,
container = document.createElement('div') // создаем контейнер в котором будем подменять изображения
img1=document.createElement('img');
img1.src='1.jpg';
container.appendChild(img);
//первое изображение отображаем сразу

Img2=document.createElement('img');
Img2.onload=onLoadEventHandles;
Img2.src='2.jpg';
 //второму вешаем обработчик на загрузку

function onLoadEventHandles()
{
    img1.src = this.src
}
// после загрузки удаляем первое изображение и отображаем второе
Ответить с цитированием
  #7 (permalink)  
Старый 19.06.2016, 20:20
Новичок на форуме
Отправить личное сообщение для Skrip Посмотреть профиль Найти все сообщения от Skrip
 
Регистрация: 19.06.2016
Сообщений: 4

Эт я понял, мне просто нужно будет в дальнейшем еще и параметр передовать в функцию, но все авно спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не отрабатывает функция? zsaz jQuery 0 26.03.2016 13:47
Когда срабатывает image.onload? okaterynchuk Общие вопросы Javascript 3 30.07.2014 18:22
Цикл не отрабатывает до конца diakon Общие вопросы Javascript 5 09.09.2013 15:18
Почему скрипт отрабатывает в IE только при первом входе на сайт? tygeddar Элементы интерфейса 3 20.09.2012 01:37
Не отрабатывает событие onmouseout при внедрении нового слоя ilshat Элементы интерфейса 3 28.07.2008 06:27