Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Путь фотки, по которой кликнули  [new]
Alex_Wong
Member

Откуда:
Сообщений: 124
Добрый день.
В див-контейнере лежат фотки. Не получается по клику вывести путь, по которой кликнули.
В примере, https://jsfiddle.net/2zftbxcu/
считает количество фоток не правильно, т.к. они в html лежат не слитно ...
Не получается в addEventListener указать слушать именно клик по img.
Пробовал через getElementsByTagName('img') и this в функции, - не получилось.
Покажите, пожалуйста, как правильно делать.
22 янв 18, 16:01    [21127538]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13116
Alex_Wong
Покажите, пожалуйста, как правильно делать.

Как вариант...

<!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>
22 янв 18, 16:42    [21127784]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
Alex_Wong
Member

Откуда:
Сообщений: 124
krvsa,
спасибо, - работает как нужно.
22 янв 18, 16:51    [21127828]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
Alex_Wong
Member

Откуда:
Сообщений: 124
Если я вношу фотки в див-контейнер, например, так : https://jsfiddle.net/e8k2z567/
+

<body><div id="main"></div></body>

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) для наглядности в
одну секунду - не получилось ... Спасибо.
22 янв 18, 17:50    [21127997]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13116
Alex_Wong
можно ли считать, что они загрузятся последовательно, т.е. каждая последующая
строго после полной загрузки предыдущей?

Нет.
Скрипт добавления выполнится мгновенно, а браузер будет пытаться грузить фотки как можно быстрее...
Alex_Wong
Если нет, то как правильно сделать?

У img есть событие onload, можно использовать его для подгрузки очередной картинки.
23 янв 18, 08:35    [21128906]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
Alex_Wong
Member

Откуда:
Сообщений: 124
krvsa,

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

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

... но где-то накосячил.
Нужна именно максимально быстрая последовательная загрузка картинок.
Моё поделие с setTimeout, - понятно что не годится, его привел для наглядности :
https://jsfiddle.net/0yvg1qog/
Подскажите, пожалуйста, как правильно сделать с onload ?
23 янв 18, 13:10    [21130261]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15195
Alex_Wong,
что ты хочешь этим достигнуть?
23 янв 18, 13:15    [21130281]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13116
Alex_Wong
как правильно сделать с onload ?

Например так...

<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>
23 янв 18, 13:34    [21130399]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
Alex_Wong
Member

Откуда:
Сообщений: 124
krvsa, круто, большое спасибо.
23 янв 18, 14:08    [21130604]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15195
Alex_Wong,

так причем здесь загрузка и клик по картинке?
что в итоге надо?
23 янв 18, 14:25    [21130733]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
Carhartt
Member

Откуда:
Сообщений: 1
HTML:
<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:
$(document).ready(function() {
	$("img").click(function() {
  	alert($(this).attr('src'));
  });
});
5 фев 18, 16:02    [21167315]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
ShSerge
Member

Откуда: ʚонɔ dиw
Сообщений: 24851
Carhartt,

Как вариант:
for(var i=0;i<document.images.length;i++) alert(document.images[i].src);
7 фев 18, 19:52    [21174500]     Ответить | Цитировать Сообщить модератору
 Re: Путь фотки, по которой кликнули  [new]
ShSerge
Member

Откуда: ʚонɔ dиw
Сообщений: 24851
пардон. Про клик забыл. ;)
7 фев 18, 19:55    [21174508]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить