mapOpen = $('button.map-open');
mapOpen.click(function() {
$('#map').fadeIn('400');
$('body, html').animate({'scrollTop':5000},600);
mapOpen.text('закрыть схему проезда');
mapOpen.addClass('map-close').removeClass('map-open');
});
mapClose = $('button.map-close');
mapClose.click(function() {
$('#map').fadeOut('400');
mapClose.text('открыть схему проезда');
mapClose.addClass('map-open').removeClass('map-close');
});
$('img').click(function(){
$('audio')[0].play(); // выборка нужного тега audio и запуск метода play()
});
А каков сакральный смысл отлова события на document в данном случае?
$(document).on('change', '[data-my-plugin]', someHandler)
Браузер однозначно что-то оптимизирует при выходе элементов за viewport, но на это сильно расчитывать не стоит.
а) Делал горизонтальную прокрутку viewport`а, анимация идет намного плавнее, если по бокам элементов намного меньше и те что не в области видимости прятать через display:none; Визуально разницу можно наблюдать. Можно проверить.
б) Делал бесконечную вертикальную прокрутку вниз, подобие стены в соцсети, где доходя до низа приходит новая пачка с медиа контнетном. В js все обработчики отвязывались своевременно, профайлил все долго и упорно, пытаясь ускорить сей процесс. Но после 1000-2000 элементов контента на странице, браузер начинал на ПК тупить и кушал все больше памяти. Хотя оптимизация самими браузером определенно есть. Но удалять элементы из DOM оказалось намного эффективнее.
2) Тут вопрос не в прокрутке, а в том, что когда ты удалишь вышерасположенные элементы, то представление схлопнется, элементы перепозиционируются. Вставлять пустую элементы такой же высоты вместо прежних это костыльно.
Посмотреть можно примеры отсюда - http://masonry.desandro.com/
Уверен что кто-то выгружает тоже элементы, чтобы GUI был более отзывчивым.