Карусель

necro · April 23, 2013

Добрый день, подключил карусель и добавил менюху, посмотреть можно тут:

http://necro.p.ht/afrika-news.org/

Смысл вот в чем, наводишь на пункт меню, картинка меняется, все работает, но только на первом слайде, начиная со второго вроде как и работать должно, но ничего не меняется, картинка остается той дже, когда меню было мень и между картинкой и меню было место, начиная со второго слайда, вторая картинка появлялась после первой, до меню, вернее кусок который влазил в этот промежуток. Вопрос как сделать, чтобы картинка менялась на всех слайдах при наведении или мб кто-то знает уже готовый такой слайдер где есть.

Вот код слайдера, если что:



<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<img src="bigNewsImage.jpg" id="img">
<ul>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Евросоюз решил дать Мали военную поддержку</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">Мозамбик использует крыс для борьбы с туберкулезом</a></li>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Бизнес и бездомные в Замбии</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">В Тунисе после беспорядков сняли губернатора</a></li>
</ul>
</div>
<div class="slide">
<img src="bigNewsImage.jpg" id="img">
<ul>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Евросоюз решил дать Мали военную поддержку</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">Мозамбик использует крыс для борьбы с туберкулезом</a></li>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Бизнес и бездомные в Замбии</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">В Тунисе после беспорядков сняли губернатора</a></li>
</ul>
</div>
<div class="slide">
<img src="bigNewsImage.jpg" id="img">
<ul>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Евросоюз решил дать Мали военную поддержку</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">Мозамбик использует крыс для борьбы с туберкулезом</a></li>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Бизнес и бездомные в Замбии</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">В Тунисе после беспорядков сняли губернатора</a></li>
</ul>
</div>
<div class="slide">
<img src="bigNewsImage.jpg" id="img">
<ul>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Евросоюз решил дать Мали военную поддержку</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">Мозамбик использует крыс для борьбы с туберкулезом</a></li>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Бизнес и бездомные в Замбии</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">В Тунисе после беспорядков сняли губернатора</a></li>
</ul>
</div>
<div class="slide">
<img src="bigNewsImage.jpg" id="img">
<ul>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Евросоюз решил дать Мали военную поддержку</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">Мозамбик использует крыс для борьбы с туберкулезом</a></li>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Бизнес и бездомные в Замбии</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">В Тунисе после беспорядков сняли губернатора</a></li>
</ul>
</div>
<div class="slide">
<img src="bigNewsImage.jpg" id="img">
<ul>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Евросоюз решил дать Мали военную поддержку</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">Мозамбик использует крыс для борьбы с туберкулезом</a></li>
<li onmouseover="show_img(1);" onmouseout="show_img(0);"><a href="#">Бизнес и бездомные в Замбии</a></li>
<li onmouseover="show_img(0);" onmouseout="show_img(0);"><a href="#">В Тунисе после беспорядков сняли губернатора</a></li>
</ul>
</div>
</div>
</div>
</div>

Вот код js


<script>
var imgs = new Array("bigNewsImage.jpg", "bigNewsImage1.jpg");
function show_img(a) {
var obj = document.getElementById("img");
obj.src = imgs[a];
}
</script>

Буду очень благодарен, если кто подскажет, как сделать. Спасибо.

Edited April 23, 2013 by necro

viv · April 24, 2013

Привет)

Все дело в id у img.

id должно быть уникальным. Иначе браузер может отрабатывать странно, в общем грабли в ногу втыкаются)).

Например на странице может быть только один id="img".

В Вашем случае, браузер идет сверху страницы и ему попадается id="img" они его записывает в специальное хранилище для прямого доступа, а остальные игнорирует.

Используйте атрибут data-.... Оно валидно причем.

А зачем Вы ставите обработчики инлайн?

Edited April 24, 2013 by viv

necro · April 24, 2013

Дело не в ид, я тоже думал, копировал 6 раз скрипт и присваивал разные айдишники) тоже самое получается, работает только на первом слайде. А с дата, как писать? Или дайте ссылку, де почитать, попробую сделать.

viv · April 25, 2013

Дело не в ид, я тоже думал, копировал 6 раз скрипт и присваивал разные айдишники) тоже самое получается, работает только на первом слайде

Нет нет, Вы что то не так сделали. Смотрите, я присвоил уникальный id каждому изображению и скопировал несколько раз Вашу функцию, НО с разными именами - это важно. Иначе одинаковые имена функции перезаписывают друг друга и сработает та, которая ниже в коде. И ЗАРАБОТАЛО)).

Но на самом деле сейчас не присваивают обработчики событий инлайн. Давайте экономить ресурсы. Вот написал Вам быстренько скрипт http://jsbin.com/erofuz/4/edit

Убрал эти страшные onmouseover из html и id из картинок - они там не нужны))).

Edited April 25, 2013 by viv

s0rr0w · April 25, 2013

Убрал эти страшные onmouseover из html и id из картинок - они там не нужны))).

Какие интересные предрассудки у людей бывают..

Если по-хорошему, то для данной задачи даже JS не нужен

viv · April 26, 2013

Если по-хорошему, то для данной задачи даже JS не нужен

Конечно можно и через css сделать, но ТС'у нужно через JS. Он и код предоставил.

Какие интересные предрассудки у людей бывают..

Это у Вас в голове бывают. То то я и смотрю, что на gmail.com в html одни onclick да onmouseover атрибуты. ЗАЧЕМ захламлять html? Посмотрите код выше, ужас!

Конечно можно использовать, где что то простое. Но как правило JS код выносят в отдельные файлы. Представьте, что у Вас динамический интерфейс в каком то блоке меняется html и все Ваши атрибуты событий исчезнут, а если Вы через JS будете их навешивать, то это просто извращение.

Зачем же тогда Джон Ресиг создавал jQuery? И в последующим движок поиска элементов sizzle?

Edited April 26, 2013 by viv

s0rr0w · April 26, 2013

Это у Вас в голове бывают. То то я и смотрю, что на gmail.com в html одни onclick да onmouseover атрибуты. ЗАЧЕМ захламлять html? Посмотрите код выше, ужас!

Это, наверное, не просто так было сделано... Вы не задумывались над тем, что любой ненавязчивый JS существенно замедляет отладку и тестирование? А причина простая - нет официально задокументированных методов, которые бы рассказали, какие именно обработчики сейчас навешены через addEventListener. Лично мне это кажется гирей, которую люди вешают себе на ногу, чтобы потом придумать множество способов, как облегчить от нее страдания.

А вы не задумывались никогда, что кроме ООП есть еще другие паттерны реализации приложений? Например, структурный, когда логика переносится по максимуму на структуры HTML. И плевать на то, что кому-то это кажется ужасным, это гораздо удобнее, практичнее, надежнее, проще тестируется.

Конечно можно использовать, где что то простое. Но как правило JS код выносят в отдельные файлы. Представьте, что у Вас динамический интерфейс в каком то блоке меняется html и все Ваши атрибуты событий исчезнут, а если Вы через JS будете их навешивать, то это просто извращение.

Меня не нужно пугать такими вещами. Вы про html-темплейтирование что-то слышали? Это методика построения приложения, когда HTML-код содержит в себе все, что необходимо для его функционирования, и клонируя HTML-структуры вы получаете сразу полнофункциональный компонент или его элемент. При этом абсолютно ничего в JS менять или переопределять не нужно. Этим достигается отличная слабосвязанность компонентов. Если у вас jQuery головного мозга, то это вам будет очень тяжело понять.

Зачем же тогда Джон Ресиг создавал jQuery? И в последующим движок поиска элементов sizzle?

По его мнению, jQuery позволило бы write less, do more. На практике же это далеко не всегда так.

nerv · April 26, 2013

А причина простая - нет официально задокументированных методов, которые бы рассказали, какие именно обработчики сейчас навешены через addEventListener.

отладчик

еще такая штука есть, но я не пользовался

еще https://developers.g...listenersobject, https://developers.g...tsobject_events

http://www.w3.org/TR...entListenerList

Edited April 26, 2013 by nerv

viv · April 26, 2013

Вы не задумывались над тем, что любой ненавязчивый JS существенно замедляет отладку и тестирование?

Смех да и только. Почему же разработчики google и yandex не используют предлагаемые Вами методы разработки? У них сложнейшие приложения и ни чего, справляются как то.

А причина простая - нет официально задокументированных методов, которые бы рассказали, какие именно обработчики сейчас навешены через addEventListener.

У Вас устаревшая информация! Вот цитата из javascript.ru:

На текущий момент более-менее устоялся стандартный способ кросс-браузерного добавления событий.
Большой вклад в это внесли Dean Edwards и Tino Zeidel, на библиотеках которых зачастую и основан современный код. Например, это так для dojo toolkit и jQuery.
Кроме того, что в новом коде не будет описанных недостатков, он предоставит ряд приятных дополнительных фич:
Обработчики срабатывают в том же порядке, в котором назначены
Обработчик может остановить не только всплытие, но и дальнейшую цепочку обработки на текущем элементе
Можно получить список обработчиков
Можно удалить все обработчики события/элемента, не обладая ссылкой на каждую функцию
...
Подходящее решение состоит из двух частей, его реализацию мы рассмотрим в процессе создания новой мини-библиотеки событий. Назовем ее Event.
Основная логика работы:
Элементу добавляется объект events, который содержит назначенные обработчики событий.
То есть, обработчики добавляются в соответствующий подсписок events один за другим. При этом каждый новый обработчик при добавлении получает уникальный номер.
По этому номеру обработчик можно будет удалить.
При добавлении первого обработчика некоторого события, функция Event.addпри помощи addEventListener/attachEvent вешает на это событие специальный служебный обработчик handle. Обработчик создается так, чтобы помнил элемент, на котором висит.
Теперь при наступлении события браузер запустит функцию-обработчикhandle.
А уже она, зная свой элемент, получает объект events и запускает назначенные обработчики из списка.
Обработчики при этом запускаются ровно в той последовательности, в которой они были добавлены.
Что немаловажно, handle не просто запускает обработчики, а еще и осуществляет кроссбраузерную обработку объекта события event, так что не надо беспокоиться о различиях между браузерами.
Теперь, когда у нас есть общий формат, и в общих чертах понятно, как оно будет работать - займемся деталями реализации.

Вот Вам линк на статью http://javascript.ru/tutorial/events/crossbrowser Почитайте уж на досуге =)

А вообще не собираюсь ни чего доказывать и дискутировать попусту, если Вы не знакомы с информацией которую скинул выше, То чего уж тут время тратить.

У Вас один взгляд, у меня другой. Но мой по крайней мере совпадает с разработчиками google и yandex, а Ваш вот с начинающим ТС.

А причина простая - нет официально задокументированных методов, которые бы рассказали, какие именно обработчики сейчас навешены через addEventListener.
отладчик
еще такая штука есть, но я не пользовался
еще https://developers.g...listenersobject

Именно)) Сейчас только черта лысого нет)) И то наверное уже написали)).

s0rr0w

Вы с сео знакомы? В курсе, что гугл учитывает время загрузки стрницы для ранжирования, а о пользователях мобильных приложений Вы подумали? С Вашими методами атрибутов событий страница раздувается. Пример выше у ТС, зачем грузить мобильнику с дохлым gprs лишнее? Причем каждый раз. А если у Вас таблица с 1000 ячейками и при клике, что то должно происходить Вы будете 1000 обработчиков прописывать :blink: ?. Хотя можете не отвечать.

nerv · April 26, 2013

Именно)) Сейчас только черта лысого нет)) И то наверное уже написали)).

я в пост выше еще ссылок добавил, так что у тебя тоже "старая информация"

viv · April 26, 2013

я в пост выше еще ссылок добавил, так что у тебя тоже "старая информация"

Да да да, спецификация)) Куда же без нее). Спасибо за инфу.

s0rr0w · April 26, 2013

http://www.w3.org/TR...entListenerList

Я тоже умею умные ссылки постить

http://stackoverflow.com/questions/7810534/have-any-browsers-implemented-the-dom3-eventlistenerlist

Почитай, почему этот метод так и не был реализован в браузерах

Теперь давай просто разберемся, что же нам предлагает тот же хром для дебаггинга. Ага, пару списков в абсолютно неудобоваримом виде. Вроде и информация есть, а быстро найти нужное - не сильно то и просто. Читабельность того же onclick в разы выше. Потому что определить поведение элемента можно заглянув в исходный код, в простое дерево в инструментах разработчика.

Смех да и только. Почему же разработчики google и yandex не используют предлагаемые Вами методы разработки? У них сложнейшие приложения и ни чего, справляются как то.

Открыл google.com. Набрал слово javascript. Посмотрел код первой попавшейся ссылки.


<a onmousedown="return rwt(this,'','','','1','AFQjCNGf8B1MwS6OVNL15BpCO4mTO-e8NQ','','0CC8QFjAA','','',event)" href="http://uk.wikipedia.org/wiki/Javascript"><em>Javascript</em> — Вікіпедія</a>

Еще вопросы есть? Фанатизм - страшная штука...

s0rr0w
Вы с сео знакомы? В курсе, что гугл учитывает время загрузки стрницы для ранжирования, а о пользователях мобильных приложений Вы подумали? С Вашими методами атрибутов событий страница раздувается. Пример выше у ТС, зачем грузить мобильнику с дохлым gprs лишнее? Причем каждый раз. А если у Вас таблица с 1000 ячейками и при клике, что то должно происходить Вы будете 1000 обработчиков прописывать ?. Хотя можете не отвечать.

Вы не думали о том, что накладные расходы на формирование ненавязчивого JS могут быть на десятки килобайт больше даже 1000 ячеек? Мало того, если вам реально необходимо выводить таблицы с 1000 ячеек, то мне жаль ваших пользователей. И еще, я могу сделать ряд твиков, сократив количество обработчиков до одного. addEventListener для тысячи обработчиков будет жрать ресурс, итерируя DOM, onclick="" парсится в разы быстрее. Сравните как нибудь скорость innerHTML и appendChild, особенно на большом количестве элементов. Почитайте ваших любимых Yandex, или документацию по оптимизации jQuery, там советуют или innerHTML, или DocumentFragment.

nerv · April 27, 2013

Теперь давай просто разберемся, что же нам предлагает тот же хром для дебаггинга. Ага, пару списков в абсолютно неудобоваримом виде. Вроде и информация есть, а быстро найти нужное - не сильно то и просто.

признаться, пока не было такой задачи, сейчас попытался разобраться, вот, что получилось. Допустим, есть простая страница:




<!DOCTYPE HTML>
<html>
<head> </head>
<body>

<div id="test" style="height: 600px; background-color: green;"></div>


<script>

document.addEventListener( 'click', function() {
console.log( 1 );
});

document.getElementById( 'test' ).addEventListener( 'click', function() {
console.log( 2 );
});

</script>

</body>
</html>

задача - найти в коде обработчики на элементе с id 'test'.

Шаг 1. Открываем консоль хрома и пишем туда

getEventListeners( $( '#test' ) );

результат

видим, что на на данном элементе присутствует один обработчик 'click'.

Шаг 2. Открываем вкладку отладчика Source, устанавливаем точку останова на нужное нам событие в Event Listener Breakpoints -> Mouse -> click

Шаг 3. Триггерим/поджигаем интересующее нас событие на элементе, например, так

$( '#test' ).click();

и нас выбрасывает на

В дополнение. Код функции обработчика можно просмотреть из консоли всего в одну команду:

getEventListeners( $( '#test' ) ).click[ 0 ].listener;

Edited April 27, 2013 by nerv

viv · April 27, 2013

Открыл google.com. Набрал слово javascript. Посмотрел код первой попавшейся ссылки.

Вы не перестаете меня смешить))) Зашел я gmail.com открыл исходный код сохранил его на диск, весит 148 кб из этого огромного количества кода html'ля всего 20 ~ 25 тегов. Остальное JS. И где там ваши сплошь и рядом атрибуты событий? Правда на одной ссылке есть атрибут клика))) Которая говорит загрузить страницу старую статичную страницу почты из аля 90 годы))).

Вы не думали о том, что накладные расходы на формирование ненавязчивого JS могут быть на десятки килобайт больше

А вот гугл так не думает))) как видно из страницы у них весть html формируется яваскриптом. Интерфейс динамичный(ajax, comet) если конечно это Вам знакомо. Файлы js кешируются браузерами плюс различные сжиматели кода которые делают его в несколько килобайт не сравнятся с Вашим подходом атрибутов кликов. Это видно из страницы ТС.

Мало того, если вам реально необходимо выводить таблицы с 1000 ячеек, то мне жаль ваших пользователей.

Вообще то это для примера я Вам написал, но Вы и этого не поняли)))) И причем здесь таблица в 1000 ячеек и addEventListener? Объясняю Вам на пальцах, чтобы обработать таблицу с 1000 ячеками(ЭТО ДЛЯ ПРИМЕРА), достаточно повесить всего один обработчик на tabel и ДЕЛЕГИРОВАНИЕМ решать нужные задачи. Вот линк http://learn.javascript.ru/event-delegation почитайте перед сном, чтоб лучше запомнилось. Офигеть, Вы собирались повесить атрибут события на каждую ячейку? БРЕД!

Сравните как нибудь скорость innerHTML и appendChild,

Это 2 разных метода и работают они по разному. Вот Вам еще пища для ума, питайтесь http://learn.javascript.ru/multi-insert / http://learn.javascript.ru/modifying-document

И вообще, причем здесь эти 2 метода. Речь идет о том, что не используют сейчас атрибуты событий, ну ни как. Только если что то простое там нужно. Человек застрял в 90х. Может тогда и файлы таблицы стилей не будем использовать??? А сразу атрибутами оформлять =)))

s0rr0w · April 27, 2013

Вы не перестаете меня смешить))) Зашел я gmail.com открыл исходный код сохранил его на диск, весит 148 кб из этого огромного количества кода html'ля всего 20 ~ 25 тегов. Остальное JS. И где там ваши сплошь и рядом атрибуты событий? Правда на одной ссылке есть атрибут клика))) Которая говорит загрузить страницу старую статичную страницу почты из аля 90 годы))).

Какая избирательная логика... Открываю ютюб, ищу //*[@onclick] Результатов масса. Менюшка гугла с их сервисами. Сплошь и рядом onclick (а она была переделана совершенно недавно), G+ тоже есть. Да вперемешку там все.

Заходим на сайт yandex.ru, ищем то же самое. 96 matching nodes. И это на обновленном совсем недавно ресурсе! Используются приемы из 90х!!!

А вот гугл так не думает))) как видно из страницы у них весть html формируется яваскриптом. Интерфейс динамичный(ajax, comet) если конечно это Вам знакомо. Файлы js кешируются браузерами плюс различные сжиматели кода которые делают его в несколько килобайт не сравнятся с Вашим подходом атрибутов кликов. Это видно из страницы ТС.

Накладные расходы не содержат только килобайты передаваемой информации. Сюда включаем и скорость рендеринга страницы на стороне клиента. Вы никогда не задумывались, а что же означает вот тот прогресс-бар, который показывает gmail при загрузке? Лично у меня интерфейс почтовика рендерится примерно секунду. Это и есть те накладные расходы, про которые я говорил.

Офигеть, Вы собирались повесить атрибут события на каждую ячейку? БРЕД!

О, начались фантазии...

Это 2 разных метода и работают они по разному. Вот Вам еще пища для ума, питайтесь http://learn.javascr...ru/multi-insert / http://learn.javascr...ifying-document

Да вы что, правда что-ли? А я то горемычный думал, что это одно и то же... :rofl:

И вообще, причем здесь эти 2 метода. Речь идет о том, что не используют сейчас атрибуты событий, ну ни как. Только если что то простое там нужно. Человек застрял в 90х. Может тогда и файлы таблицы стилей не будем использовать??? А сразу атрибутами оформлять =)))

Я дал ссылки и примеры из ваших людимых гуглей да яндыксей. Даже они используют аттрибуты, и не стесняются. Потому что фанатизм и максимализм хорошо, а стоимость поддержки и архитектура требуют совершенно непопулярных у таких людей как вы решений.

Живите и дальше в своем розовом идеалистическом мире

признаться, пока не было такой задачи, сейчас попытался разобраться, вот, что получилось. Допустим, есть простая страница:
задача - найти в коде обработчики на элементе с id 'test'.
Шаг 1. Открываем консоль хрома и пишем туда
getEventListeners( $( '#test' ) );
результат
видим, что на на данном элементе присутствует один обработчик 'click'.
Шаг 2. Открываем вкладку отладчика Source, устанавливаем точку останова на нужное нам событие в Event Listener Breakpoints -> Mouse -> click
Шаг 3. Триггерим/поджигаем интересующее нас событие на элементе, например, так
$( '#test' ).click();
и нас выбрасывает на
В дополнение. Код функции обработчика можно просмотреть из консоли всего в одну команду:
getEventListeners( $( '#test' ) ).click[ 0 ].listener;

Слишком долго, слишком сложно. Тыцнуть в тег, скопировать название функции и сделать alert(functionName) и я уже читаю код обработчика.

viv · April 28, 2013

ищем то же самое. 96 matching nodes

Посмотрите ка на него, нашел совпадения поиском, смешной Вы человек. Я тоже нашел 30 совпадений(это вообще в коде, а в чистом html 1 совпадение) на gmail.com из 144629 символов. А это меньше 0.25%

Получается, Ваша методика используется в мизерном количестве(даже меньше мизерного), как и говорил раньше, только там, где что то очень простое. Глупо это оспаривать.

Сюда включаем и скорость рендеринга страницы на стороне клиента

Со скоростью рендеринга тут я с Вами согласен. Время на это нужно.

а что же означает вот тот прогресс-бар, который показывает gmail при загрузке? Лично у меня интерфейс почтовика рендерится примерно секунду. Это и есть те накладные расходы, про которые я говорил.

-- Ну так а это то о чем говорит??? О том что гугл использует как Вы пишете ""накладные расходы на формирование ненавязчивого JS"". Ну и где Ваши атрибуты событий вообще? Прозрели?

О, начались фантазии...

Фантазии это у Вас)) Вы же сами доказываете мне, что нужно использовать атрибуты событий, Если уж код ТС'а приняли как отличный код, то в таблицу примера, Вы бы точно понапихали своих атрибутов :rofl: вот бы коллегам показать :rofl:

Да вы что, правда что-ли? А я то горемычный думал, что это одно и то же.

Так ты и есть горемычный!

Как Вы вставите узел последним в родительский контейнер, где есть еще множество различных элементов при помощи innerHTML? Да ни как Вы не вставите. Он перезапишет там весь html.

Вот Вам цитата из javascript.ru:

Добавление innerHTML+= осуществляет перезапись
Синтаксически, можно добавить текст к innerHTML через +=:
chatDiv.innerHTML += "<div>Привет<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "Как дела?";
На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись:
Удаляется старое содержание
На его место становится новое значение innerHTML.
Так как новое значение записывается с нуля, то все изображения и другие ресурсы будут перезагружены. В примере выше вторая строчка перезагрузитsmile.gif, который был до неё.
Если в chatDiv много текста, то эта перезагрузка будет очень заметна.
К счастью, есть и другие способы добавить содержимое, не использующиеinnerHTML.

И ссылку для чтения дарю http://learn.javascr...кости-innerhtml

В то время как appendChild легко ДОБАВИТ узел БЕЗ ПЕРЕЗАПИСИ. и ссылку для чтения http://learn.javascr...ifying-document

И зачем я Вам даю ссылки, все равно не читаете. Ну так и оставайтесь как Вы сами себя назвали "горемычным".

Пустой разговор, оставайтесь со своими атрибутами. И стили тоже пишите через атрибуты, а то ведь нужно грузить файлы, ждать ответа сервера, накладные расходы :rofl: И ни чего не подключайте к страницам, накладные расходы видите ли. Все пихаем в html :rofl: Да здравствует web -3

Бонус: Вместо alert'а существует console.log по приятнее все же будет Вам смотреть код функции. Пользуйтесь уж на здоровье)).

Edited April 28, 2013 by viv

s0rr0w · April 28, 2013

Посмотрите ка на него, нашел совпадения поиском, смешной Вы человек. Я тоже нашел 30 совпадений(это вообще в коде, а в чистом html 1 совпадение) на gmail.com из 144629 символов. А это меньше 0.25%
Получается, Ваша методика используется в мизерном количестве(даже меньше мизерного), как и говорил раньше, только там, где что то очень простое. Глупо это оспаривать.

Одна из тактик отрицания факта - преуменьшение его влияния или важности. Неважно какое количество, важно что приемчики из 90х живы и процветают. Наверное это что-то значит... Скорее всего в Google и Yandex работает низкооплачиваемые кодеры, которые не до конца прониклись практикой ненавязчивого JS. Другого пояснения у меня нет...

Со скоростью рендеринга тут я с Вами согласен. Время на это нужно.

Вы часто видели страницы на чистом HTML, для рендеринга которых требуется ОДНА СЕКУНДА? Лично я видел, но это очень большие документы.

-- Ну так а это то о чем говорит??? О том что гугл использует как Вы пишете ""накладные расходы на формирование ненавязчивого JS"". Ну и где Ваши атрибуты событий вообще? Прозрели?

Конечно прозрел, вместо десятков милисекунд для рендеринга обычного HTML браузер целую секунду что-то считает далеко не на самом медленном компе. Это и есть накладные расходы, про которые я говорил. Как раз из-за желания гуглом сократить работу своих серверов, переходе не ненавязчивый JS.

Фантазии это у Вас)) Вы же сами доказываете мне, что нужно использовать атрибуты событий, Если уж код ТС'а приняли как отличный код, то в таблицу примера, Вы бы точно понапихали своих атрибутов вот бы коллегам показать

Я ничего вам не доказываю. Это не тот случай, когда что-то надо доказывать.

Как Вы вставите узел последним в родительский контейнер, где есть еще множество различных элементов при помощи innerHTML? Да ни как Вы не вставите. Он перезапишет там весь html.

Я смотрю, про DocumentFragment мало написано в вашем любимом javascript.ru?

Бонус: Вместо alert'а существует console.log по приятнее все же будет Вам смотреть код функции. Пользуйтесь уж на здоровье)).

Не все браузеры одинаково показывают содержимое функций, в отличие от единого формата alert'a

viv · April 28, 2013

Скорее всего в Google и Yandex работает низкооплачиваемые кодеры, которые не до конца прониклись практикой ненавязчивого JS. Другого пояснения у меня нет...

- Параноя

Люди, кто читает эту тему :rofl: я умываю руки))) человек живет в проекции реальности.

Svatov · April 28, 2013

Это тебе надо научиться элементарной вежливости и уважения к чужому мнению. Почему ты не допускаешь мысль, что ты чего-то можешь не знать? Я не знаю каким будет для тебя откровением, но gmail писали на GWT, а это кроссплатформенный инструмент для JAVA разработчиков. То про, что пытается до тебя донести Sorrow, уже используется в некоторых решениях..."других" решениях. Почитайте шаблоны проектирования, которые впрочем сейчас набирают популярность. Панацеи нет, есть эффективные решения в рамках какой-то задачи. Вы в данной ситуации больше похожи на неуравновешенного фанатика.

Edited April 28, 2013 by Svatov

s0rr0w · April 28, 2013

Люди, кто читает эту тему я умываю руки))) человек живет в проекции реальности.

Конечно же проекция, как же иначе. Аргументы закончились уже? Так быстро?

Окей, давай вернемся к тому-же Яндексу, и его развитием БЭМ, но уже в рамках JS.

Открываем ссылку http://ru.bem.info/articles/bem-js-main-terms/ и читаем

Как и любой Javascript-компонент, код, написанный под i-bem.js должен быть проассоциирован с HTML-фрагментом, который он намерен превратить в функционирующую часть интерфейса. Здесь для этого достаточно добавить блоку CSS-класс i-bem и указать в атрибуте onclick параметры блока.

Фу, ересь какая! Такие "модные" разработчики в Яндексе сидят, и используют приемчики из 90-х...

Надо им написать, чтобы не позорились, и почитали наконец javascript.ru...

nerv · April 29, 2013

Слишком долго, слишком сложно. Тыцнуть в тег, скопировать название функции и сделать alert(functionName) и я уже читаю код обработчика.

во-первых, я не верю, что это

слишком сложно

во-вторых, тыц - это поиск по файлам. Огромный привет, если имя функции встречается много раз

Хотел бы заострить внимание, что

и я уже читаю код обработчика.

достигается в одну команду в консоли, о чем я писал выше.

s0rr0w · April 29, 2013

во-вторых, тыц - это поиск по файлам. Огромный привет, если имя функции встречается много раз

Не надо по файлам, надо по исходному коду

nerv · April 30, 2013

Не надо по файлам, надо по исходному коду

хорошо, по исходному коду. Только это не отменяет вышесказанного.

Огромный привет, если имя/тело функции встречается много раз

чем это может быть удобней, нежели явное указание отладчиком места исполнения/вызова функции по средствам точки останова?

s0rr0w · April 30, 2013

чем это может быть удобней, нежели явное указание отладчиком места исполнения/вызова функции по средствам точки останова?

Каждый делает отладку ровно так, как привык делать, и как позволяет делать архитектура приложения. Мне позволяет делать в пару кликов, или вообще без кликов.

nerv · April 30, 2013

все оказалось намного проще случайно наткнулся )

страница (не знаю, как код в спойлер запихнуть)


<!DOCTYPE HTML>
<html>
<head> </head>
<body>

<div id="test" style="height: 600px; background-color: green;"></div>


<script>

document.addEventListener( 'click', function() {
console.log( 1 );
});

document.getElementById( 'test' ).addEventListener( 'click', function() {
console.log( 2 );
});


document.getElementById( 'test' ).addEventListener( 'click', function() {
console.log( 3 );
});

</script>

</body>
</html>

Edited April 30, 2013 by alexriz
Вот так =)

Svatov · May 1, 2013

В этом случае все просто) А как быстро посмотреть обработчик, если его повесили через JQuery или другие либы?

Sign In

Карусель

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information