JQuery предварительно документ готовое событие

Question

У меня есть список из 179 миниатюрных изображений, которые я пытаюсь применить с помощью инструмента лайтбокса jQuery к неупорядоченному списку гиперссылок.

Проблема, с которой я столкнулся, заключается в том, что jQuery не запускается до тех пор, пока изображения не закончат загрузку, каждое изображение имеет размер около 23 КБ, поэтому само по себе оно невелико, но для группы это составляет около 4 МБ.

В IE (главном браузере, используемом клиентами) задержка составляет около 5 секунд, прежде чем страница полностью загрузит все миниатюры, а затем разрешит запуск jQuery.

Я попытался поместить событие готовности документа jQuery в разные места, но безуспешно, и мне удалось надеть повязку, только установив css на ul, чтобы скрыть, используя display:none перед применением .show() после того, как лайтбокс получил приложенное.

Я надеялся, что есть способ запустить сценарии jQuery до того, как весь контент загрузится?

Приветствия

ОБНОВЛЕНИЕ: Мой код в таком виде:

$(document).ready(function(){
    $("li.eventPhoto a").lightBox();
});

Но это не относится к IE, пока не будут загружены все изображения.

Answer 1

$(document).ready() будет выполнено, как только DOM закончит загрузку (т. Е. До того, как все изображения закончат загрузку, но как только вся HTML-страница для вашей страницы закончит загрузку). например ...

$(document).ready(function(){
    // do someting as soon as the document is ready, 
    // possibly before the images are loaded
}) ;

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

$(window).bind('load', function() {
    // Do something when the images have finished loading
});

Если вы хотите, чтобы скрипт выполнялся сейчас, сейчас, сейчас, в том месте, в котором он появился в html-документе, тогда не используйте никакие «готовые» функции. просто сделай это прямо тогда ...

<script>
    // code that you want to execute as soon as the browsers finds this bit of your doc.
    // note that you won't be able to access the DOM as it may not all be present
</script>

Answer 2

Я бы попробовал lazyload-plugin , чтобы страницу можно было полностью загрузить и запустить $(document).ready() до загрузки всех изображений, а затем вы можете загрузить все изображения.

Answer 3

Как уже упоминали Рих и Дженс, вы можете использовать событие ready () для запуска кода перед загрузкой миниатюр. Тем не менее, вы упоминаете IE, что означает, что вы, возможно, уже используете это событие, но терпите неудачу в этом браузере (это может произойти, поскольку IE6 / 7 на самом деле не имеет события, и jQuery либо пытается обнаружить его другими средствами, либо использует load не знаю).

Если это так, забудьте о событии $ (document) .load () / $ (document) .ready () и вставьте код в html сразу после отображения последней ссылки.

Что-то вроде:

 <ul>
    (...) // List of thumbnails and links
 </ul>

 <script type="text/javascript">
    // Attach lightbox to links
 </script>

Таким образом, браузер будет прикреплять события, относящиеся к лайтбоксу, так же, как были созданы ссылки HTML, без необходимости ждать загрузки dom / html, прежде чем они начнут работать. Важно помнить, что в HTML перед тегом должны быть отображены все теги и элементы, необходимые для скрипта, а также ссылки на необходимые библиотеки js.