Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как загрузить картинку при display:block; используя всем известный плагин lazyload (https://javascript.ru/forum/jquery/41841-kak-zagruzit-kartinku-pri-display-block%3B-ispolzuya-vsem-izvestnyjj-plagin-lazyload.html)

raindew 01.10.2013 12:15

Как загрузить картинку при display:block; используя всем известный плагин lazyload
 
Доброго времени суток дамы и господа!)
Использую плагин jquery.lazyload.js для последовательной загрузки изображений на странице при прокрутки (скроллинге).
Появилась задача и заключается она вот в чем:
Допустим, есть некий блок и он скрыт с помощью (display:none;). Когда мы на него наводим, то none заменяется на block и нужно, чтобы в это время загружались картинки, используя, jquery.lazyload.js - этот скрипт. Возможно ли сие действие? Спасибо!)

BETEPAH 01.10.2013 12:25

Цитата:

Сообщение от raindew
Возможно ли сие действие?

Нет. Если блок скрыт display:none, на него можно навести только порчу. А курсор навести не получится, не на что наводить.

рони 01.10.2013 12:25

Цитата:

Сообщение от raindew
display:none. Когда мы на него наводим

офигеть!!!

raindew 01.10.2013 13:05

Да, очень смешно) Не много перепутал) Вот код:
#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"?

devote 01.10.2013 13:12

Цитата:

Сообщение от raindew
используя всем известный плагин lazyload

не имею никакого понятия о нем...

raindew 01.10.2013 13:21

Может быть тогда знаете что-нибудь иное? Нужно, чтобы картинки (товары) на странице загружались только тогда, когда они в зоне видимости.

BETEPAH 01.10.2013 13:22

mouseenter/mouseleave на блоке #photo. Темы с этими событиями каждый день на форуме вентилируются
А почему не сделать предзагрузку мелких изображений?

рони 01.10.2013 13:29

raindew,
а так пробовали?
$("img.lazy").lazyload({ 
    skip_invisible : false
});

raindew 01.10.2013 14:09

рони, skip_invisible:false, как никогда, кстати) Не знаешь, можно ли с помощью этого плагина прикрутить еще какой-нибудь блок с текстом, чтобы он появлялся только тогда, когда мы его видим? То есть, при прокрутке скролла.
BETEPAH, подскажете как?)

danik.js 01.10.2013 14:55

Цитата:

Сообщение от devote
не имею никакого понятия о нем...

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

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

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

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

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


Часовой пояс GMT +3, время: 11:54.