Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2013, 12:15
Интересующийся
Отправить личное сообщение для raindew Посмотреть профиль Найти все сообщения от raindew
 
Регистрация: 20.11.2011
Сообщений: 25

Как загрузить картинку при display:block; используя всем известный плагин lazyload
Доброго времени суток дамы и господа!)
Использую плагин jquery.lazyload.js для последовательной загрузки изображений на странице при прокрутки (скроллинге).
Появилась задача и заключается она вот в чем:
Допустим, есть некий блок и он скрыт с помощью (display:none. Когда мы на него наводим, то none заменяется на block и нужно, чтобы в это время загружались картинки, используя, jquery.lazyload.js - этот скрипт. Возможно ли сие действие? Спасибо!)
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2013, 12:25
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от raindew
Возможно ли сие действие?
Нет. Если блок скрыт display:none, на него можно навести только порчу. А курсор навести не получится, не на что наводить.
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2013, 12:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от raindew
display:none. Когда мы на него наводим
офигеть!!!
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2013, 13:05
Интересующийся
Отправить личное сообщение для raindew Посмотреть профиль Найти все сообщения от raindew
 
Регистрация: 20.11.2011
Сообщений: 25

Да, очень смешно) Не много перепутал) Вот код:
#photo {border;1 px solid black;height:100px;}
#photo:hover .photo-small {display:block;}
#photo .photo-small {display:none;}

<div id='photo'>
<div class='photo-big'>
<img class='lazy' data-original=''>
</div>
<div class='photo-small'>
<img class='lazy' data-original=''>
<img class='lazy' data-original=''>
<img class='lazy' data-original=''>
<img class='lazy' data-original=''>
</div>
</div>

Как в таком случае загружать картинки при появлении блока "photo-small"?
Ответить с цитированием
  #5 (permalink)  
Старый 01.10.2013, 13:12
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от raindew
используя всем известный плагин lazyload
не имею никакого понятия о нем...
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #6 (permalink)  
Старый 01.10.2013, 13:21
Интересующийся
Отправить личное сообщение для raindew Посмотреть профиль Найти все сообщения от raindew
 
Регистрация: 20.11.2011
Сообщений: 25

Может быть тогда знаете что-нибудь иное? Нужно, чтобы картинки (товары) на странице загружались только тогда, когда они в зоне видимости.
Ответить с цитированием
  #7 (permalink)  
Старый 01.10.2013, 13:22
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

mouseenter/mouseleave на блоке #photo. Темы с этими событиями каждый день на форуме вентилируются
А почему не сделать предзагрузку мелких изображений?
Ответить с цитированием
  #8 (permalink)  
Старый 01.10.2013, 13:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

raindew,
а так пробовали?
$("img.lazy").lazyload({ 
    skip_invisible : false
});
Ответить с цитированием
  #9 (permalink)  
Старый 01.10.2013, 14:09
Интересующийся
Отправить личное сообщение для raindew Посмотреть профиль Найти все сообщения от raindew
 
Регистрация: 20.11.2011
Сообщений: 25

рони, skip_invisible:false, как никогда, кстати) Не знаешь, можно ли с помощью этого плагина прикрутить еще какой-нибудь блок с текстом, чтобы он появлялся только тогда, когда мы его видим? То есть, при прокрутке скролла.
BETEPAH, подскажете как?)
Ответить с цитированием
  #10 (permalink)  
Старый 01.10.2013, 14:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Кстати, недавно видел статью на хабре, не помню название. Так вот, эта статья навеяла прекрасное решение для lazy load:

<script> document.write('<plaintext>') </script>
блок картинок
<script> document.write('</plaintext>') </script>

Далее скриптом получаем содержимое plaintext, парсим через DOMParser, удаляем src картинок и вставляем результат вместо временного plaintext.

Круто ведь? Та статья на хабре была о плагине, который целиком обрамлял всю страницу в plaintext, я думаю это слишком громоздко и создает некоторые проблемы, а вот такое короткое решение - самое оно.
Недостаток только в необходимости расставлять скрипты.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как уменьшить картинку при уменьшении экрана в ie 7 с помощью jquery? listratoff jQuery 2 06.11.2012 13:19
Как скрыть картинку, при этом оставив рамку KamalovRadik Firefox/Mozilla 7 07.05.2012 12:58
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14
Как отразить картинку при помощи JS. 2dkott Элементы интерфейса 4 03.09.2009 22:51
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14