ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
25 сообщений из 34, страница 1 из 2
  1  все
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480712
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей загрузку всех картинок в таком списке

Код: javascript
1.
2.
3.
4.
5.
6.
7.
<nav class="nav" >
			<ul>
			  <li id=1><img ></li>
			  <li id=2><img ></li>
			  <li id=3><img ></li>
			</ul>
</nav>



Функция

Код: javascript
1.
2.
3.
document.querySelector('.nav ul li img').addEventListener('load', function (e) {

        });


срабатывает только 1 раз (для первой строки списка)

Вариант для каждой отдельной строки такого вида

Код: javascript
1.
2.
3.
document.querySelector('#2 img').addEventListener('load', function (e) {

        });



работает для каждой строки.

Но если строк будет 10 или 100…
Не писать же отдельного слушателя на каждую строчку с картинкой?
...
Рейтинг: 0 / 0
30.06.2017, 21:29
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480719
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
А что надо-то?
...
Рейтинг: 0 / 0
30.06.2017, 21:48
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480724
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
ShSerge,

нужно отследить загрузку всех картинок
...
Рейтинг: 0 / 0
30.06.2017, 22:02
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480737
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Сергей_ТВ, событие load у картинок не всплывает, следовательно обработчик необходимо вешать на каждый элемент.
...
Рейтинг: 0 / 0
30.06.2017, 22:16
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480741
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Сергей_ТВНе писать же отдельного слушателя на каждую строчку с картинкой?
Слушатель (Handler) один + addEventListener в цикле.
...
Рейтинг: 0 / 0
30.06.2017, 22:17
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480743
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Сергей_ТВShSerge,

нужно отследить загрузку всех картинок
что означает "отследить"? Глазами что-ли?
Ничего не понял. Может, подскажу. У каждой (!) картинки есть событие onload.
...
Рейтинг: 0 / 0
30.06.2017, 22:20
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480745
правильные посоны
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
правильные посоны
Гость
Сергей_ТВ,
http://jquery-plugins.net/waitforimages-jquery-plugin-for-callbacks-to-image-loading-events
...
Рейтинг: 0 / 0
30.06.2017, 22:25
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480747
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
правильные посоныСергей_ТВ,
http://jquery-plugins.net/waitforimages-jquery-plugin-for-callbacks-to-image-loading-events
Ну да, можно взять и плагин, где цикл завёрнут в 226 строк кода :)
...
Рейтинг: 0 / 0
30.06.2017, 22:31
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480868
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Сергей_ТВShSerge,

нужно отследить загрузку всех картинокв данном случае проще будет в каждом img вставить onload="...."
...
Рейтинг: 0 / 0
01.07.2017, 12:39
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480873
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяСергей_ТВShSerge,

нужно отследить загрузку всех картинокв данном случае проще будет в каждом img вставить onload="...."
В HTML:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE html>
<html>
<body>
  <nav class="nav" >
    <ul>
      <li id="1"><img src="1.gif" onload="onImageLoaded(this)"></li>
      <li id="2"><img src="2.gif" onload="onImageLoaded(this)"></li>
      <li id="3"><img src="3.gif" onload="onImageLoaded(this)"></li>
    </ul>
  </nav>
  <script>
    function onImageLoaded(sender) {
      alert(sender.src + " is loaded");
    }
  </script>
</body>
</html>


Вот только если ТС не может изменить разметку, то придётся таки писать цикл :)
...
Рейтинг: 0 / 0
01.07.2017, 12:53
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39480910
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAВот только если ТС не может изменить разметку, то придётся таки писать цикл :)
можно такой
Код: javascript
1.
2.
3.
4.
var x=document.querySelectorAll('.nav img');
[].forEach.call(x, function (el) {
el.setAttribute('onload', 'onImageLoaded(this)');
});
...
Рейтинг: 0 / 0
01.07.2017, 14:49
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481112
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
Парни, благодарю за ответы. Они очень помогли. Остановлюсь на варианте skyANA

skyANAСлушатель (Handler) один + addEventListener в цикле.


Поскольку
1. нужно обойтись без jQuery
2. А вариант onload="onImageLoaded(this) при работе с webpack (по непонятным для меня на текущий момент причинам, может быть какие-то ограничения, типа 'use strict';) не работает. Поясню. Рядом со строкой

Код: javascript
1.
2.
3.
document.querySelector('.nav ul li img').addEventListener('load', function (e) {

        });



стоит функция onImageLoaded(obj).
Но при загрузки изображения слушатель сообщит об этом, а onImageLoaded(obj) промолчит.
Хотя в прототипе этого когда, как раз и стояла onImageLoaded(obj)...

Или может быть есть решение, как оставить onImageLoaded(obj) для работы с webpack?
...
Рейтинг: 0 / 0
02.07.2017, 11:45
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481114
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Сергей_ТВ,

ни фига не понял, код покажите.
...
Рейтинг: 0 / 0
02.07.2017, 11:49
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481285
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
skyANAСергей_ТВ,

ни фига не понял, код покажите.


В вопросе участвуют два javascript : index.js и load.js

код index.js

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
import {load} from './load';

var body = document.getElementsByTagName('BODY')[0]; 

body.innerHTML = `

<nav class="nav" >

			<ul>

			  <li id=1><img ></li>

			  <li id=2><img ></li>

			  <li id=3><img ></li>

			</ul>

</nav>
`;



код load.js

Код: javascript
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.
export function load{

   var Image = new Array();

   for (let i = 1; i < 4; i++){

        let path = require( 'image_' + i + '.jpg');

        Image[i] = `<img src ="${path}" unload = "onImageLoaded(this)">`;

        document.getElementById(i).innerHTML = Image[i];

    }

    document.querySelector('.nav ul li img').addEventListener('load', function (e) {

    alert();   //  Этот alert срабатывает на загрузку изображений

        });

function onImageLoaded(obj){

alert ();   //   Этот не срабатывает

}



П/С
По факту в обоих скриптах существенно больше кода. Чтобы лишнее не отвлекало, это лишнее выкинул.
Сейчас проверяю правильно ли я их упростил ( не удалил ли чего имеющего важное значение)
...
Рейтинг: 0 / 0
02.07.2017, 18:08
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481294
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
???????????????
Код: sql
1.
unload = "onImageLoaded(this)"
...
Рейтинг: 0 / 0
02.07.2017, 18:22
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481298
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Сергей_ТВ,

onload , а не unload как у Вас.
...
Рейтинг: 0 / 0
02.07.2017, 18:30
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481307
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
да это опечатка в коде ее нет
ниже два js файла

Первый index.js

Код: javascript
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.
26.
import {load} from './load';

var body = document.getElementsByTagName('BODY')[0];

body.innerHTML = `

<nav class="nav" >

			<ul>

			  <li id=1><img ></li>

			  <li id=2><img ></li>

			  <li id=3><img ></li>

			</ul>

</nav>
`;

document.addEventListener("DOMContentLoaded", function(event) {

	load();

});




Второй load.js

Код: javascript
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.
export function load(){

    var Image = new Array();

    for (let i = 1; i < 4; i++){

        let path = require( 'image_' + i + '.jpg');

        Image[i] = `<img src ="${path}" onload = "onImageLoaded(this)">`;

        document.getElementById(i).innerHTML = Image[i];

    }

    document.querySelector('.nav ul li img').addEventListener('load', function (e) {

        alert(1);   //  Этот alert срабатывает на загрузку изображений

    });

    function onImageLoaded(obj){

        alert (2);   //   Этот не срабатывает

    }}



Повторюсь первый alert срабатывает, а второй нет
...
Рейтинг: 0 / 0
02.07.2017, 18:43
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481314
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Сергей_ТВ,

хорошо, а если в браузере F12 нажать и посмотреть, что уже в нём конкретно?
...
Рейтинг: 0 / 0
02.07.2017, 18:52
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481320
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
skyANA,

пишет, что функция не определена
...
Рейтинг: 0 / 0
02.07.2017, 19:02
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481322
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Сергей_ТВпишет, что функция не определенаи правильно делает, потому что onImageLoaded определена только в function load
...
Рейтинг: 0 / 0
02.07.2017, 19:08
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481324
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
вадя,

резонное замечание.

Пробовал onImageLoaded прописывать в index.js результат и ответ в консоли браузера прежние.
Создается впечатление, что после загрузки новых объектов - картинок (строка document.getElementById(i).innerHTML = Image[i];) не устанавливается связь между атрибутом onload и функцией onImageLoaded
...
Рейтинг: 0 / 0
02.07.2017, 19:17
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481326
Сергей_ТВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей_ТВ
Участник
Повторюсь.

А в случае добавления слушателя эта связь есть….
?
...
Рейтинг: 0 / 0
02.07.2017, 19:20
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481331
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Сергей_ТВробовал onImageLoaded прописывать в index.js результат и ответ в консоли браузера прежние.значит ты что-то не так делаешь. надо чтоб onImageLoaded была "глобальной"
перемести в html страницу. хотя бы для проверки
...
Рейтинг: 0 / 0
02.07.2017, 19:56
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481333
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
Сергей_ТВ
Код: javascript
1.
2.
3.
4.
5.
function onImageLoaded(obj){

        alert (2);   //   Этот не срабатывает

    }



Заменить на

Код: javascript
1.
2.
3.
4.
5.
document.onImageLoaded = function (obj){

        alert (2);   //   Этот не срабатывает

    }



И чудо случится
...
Рейтинг: 0 / 0
02.07.2017, 20:00
| Ответить | Цитировать | Написать  
Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
    #39481334
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
Да, и надо определить функцию ДО цикла for, где ты втыкаешь элементы с событием.
...
Рейтинг: 0 / 0
02.07.2017, 20:01
| Ответить | Цитировать | Написать  
25 сообщений из 34, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, плз, как правильно указать выборку на javascript для функции слушающей load
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=37&tid=1444561]:
 0ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 46ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 57ms
get tp. blocked users:
 1ms
others: 14ms
total:  160ms
созд. / загр.: 160ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]