Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Путь фотки, по которой кликнули / 13 сообщений из 13, страница 1 из 1
22.01.2018, 16:01
    #39588500
Alex_Wong
Alex_Wong
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Добрый день.
В див-контейнере лежат фотки. Не получается по клику вывести путь, по которой кликнули.
В примере, https://jsfiddle.net/2zftbxcu/
считает количество фоток не правильно, т.к. они в html лежат не слитно ...
Не получается в addEventListener указать слушать именно клик по img.
Пробовал через getElementsByTagName('img') и this в функции, - не получилось.
Покажите, пожалуйста, как правильно делать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.01.2018, 16:42
    #39588561
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Alex_WongПокажите, пожалуйста, как правильно делать.
Как вариант...

Код: html
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.
27.
28.
29.
30.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="main">
	<img src="https://javascript.ru/forum/images/smilies/smile.gif" />
	<img src="https://javascript.ru/forum/images/smilies/angry.gif" />
	<img src="https://javascript.ru/forum/images/smilies/sad.gif" />
	<img src="https://javascript.ru/forum/images/smilies/wink.gif" />
</div>
<script type='text/javascript'>
document.getElementById('main').addEventListener('click',function(e){
	if (e.target.tagName=='IMG') {
		alert(e.target.src);
	};
});
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.01.2018, 16:51
    #39588572
Alex_Wong
Alex_Wong
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
krvsa,
спасибо, - работает как нужно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.01.2018, 17:50
    #39588601
Alex_Wong
Alex_Wong
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Если я вношу фотки в див-контейнер, например, так : https://jsfiddle.net/e8k2z567/
 

Код: html
1.
<body><div id="main"></div></body>


Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
insert_foto();
function insert_foto(){

var arr_files = ['DSC00111.JPG','DSC00112.JPG','DSC00113.JPG','DSC00114.JPG'];

  for(i=0; i<4; i++){  
      var img2 = document.createElement('img');
      img2.src = '/sss/' + arr_files[i];
      img2.alt = 'sss';
      document.getElementById('main').appendChild(img2);
  }
}
 // img2.onload = alert('yes');



можно ли считать, что они загрузятся последовательно, т.е. каждая последующая
строго после полной загрузки предыдущей? Если нет, то как правильно сделать?
Пробовал прикрутить img2.onload в setTimeout( ... , 1000) для наглядности в
одну секунду - не получилось ... Спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2018, 08:35
    #39588836
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Alex_Wongможно ли считать, что они загрузятся последовательно, т.е. каждая последующая
строго после полной загрузки предыдущей?
Нет.
Скрипт добавления выполнится мгновенно, а браузер будет пытаться грузить фотки как можно быстрее...
Alex_WongЕсли нет, то как правильно сделать?
У img есть событие onload , можно использовать его для подгрузки очередной картинки.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2018, 13:10
    #39589047
Alex_Wong
Alex_Wong
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
krvsa,

Да, спасибо. Я как раз с этим .onload и застрял.
Походу понял, что были траблы из-за кэша. Думал, что прописав :
Код: html
1.
2.
<meta http-equiv="expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />


я их закрыл. Так-же к пути добавлял случайное число :
Код: javascript
1.
img2.src = '/sss/' + arr_files +'?'+ Math.floor(100000 + Math.random() * 900000);


... но где-то накосячил.
Нужна именно [i]максимально быстрая последовательная загрузка картинок.
Моё поделие с setTimeout, - понятно что не годится, его привел для наглядности :
https://jsfiddle.net/0yvg1qog/
Подскажите, пожалуйста, как правильно сделать с onload ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2018, 13:15
    #39589052
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Alex_Wong,
что ты хочешь этим достигнуть?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2018, 13:34
    #39589076
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Alex_Wongкак правильно сделать с onload ?
Например так...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
<body><div id="main"></div></body>
<script type='text/javascript'>
(function(){
	var arr_files = [
		'smile.gif',
		'angry.gif',
		'sad.gif',
		'wink.gif'
	];
	var obj=document.getElementById('main');
	function insert_foto(N){
		var img = document.createElement('img');
		img.src = 'https://javascript.ru/forum/images/smilies/' + arr_files[N];
		img.alt = 'sss'+N;
		if (N<arr_files.length-1) {
			img.onload= function(){
				insert_foto(++N);
			};
		};
		obj.appendChild(img);
	};
	insert_foto(0);
})();
</script>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2018, 14:08
    #39589114
Alex_Wong
Alex_Wong
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
krvsa, круто, большое спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2018, 14:25
    #39589141
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Alex_Wong,

так причем здесь загрузка и клик по картинке?
что в итоге надо?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.02.2018, 16:02
    #39596875
Carhartt
Carhartt
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
HTML:
Код: html
1.
2.
3.
4.
5.
6.
7.
<script src='https://code.jquery.com/jquery-latest.js'></script>
<div id="main">
<img src="/sss/DSC00111.JPG" alt="">
<img src="/sss/DSC00112.JPG" alt="">
<img src="/sss/DSC00113.JPG" alt="">
<img src="/sss/DSC00114.JPG" alt="">
</div>



JS:
Код: javascript
1.
2.
3.
4.
5.
$(document).ready(function() {
	$("img").click(function() {
  	alert($(this).attr('src'));
  });
});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.02.2018, 19:52
    #39598546
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
Carhartt,

Как вариант:
Код: javascript
1.
for(var i=0;i<document.images.length;i++) alert(document.images[i].src);
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.02.2018, 19:55
    #39598549
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Путь фотки, по которой кликнули
пардон. Про клик забыл. ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Путь фотки, по которой кликнули / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 493ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1444302]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 160ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 241ms
total:  493ms
x
x
Закрыть


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