Тайм-аут $ (document) .ready () для изображений

Question

При использовании jQuery вы ждете готовности DOM, прежде чем начинать делать что-либо. Моя проблема с изображениями.

Иногда изображения загружаются очень долго, и часто совсем не загружаются. Поэтому я хочу, чтобы функция ready () в основном имела время ожидания. Он будет ждать около 5 секунд, и если эти выбранные изображения не загрузятся, он запустит функцию.

Возможно ли это?

Answer 1

Я думаю, что вы, возможно, установили документ document.onload

.

window.onload

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

document.ready

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

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

дальнейшее чтение

Пример кода:

<script>
    $(document).ready(function() {
        var imagesLoaded = false;
        var imagesTimer = setTimeout("alert('images failed to load')", 10000);

        $("img.checkme").load(function(){
            imagesLoaded = true;
            clearTimeout(imagesTimer);
            alert('images loaded within 10 seconds')
        });
    });
</script>

Answer 2

У меня есть jQuery-плагин , который ожидает загрузки изображений в контексте селектора, а затем сработает обратный вызов.

Так что вы можете сделать ...

$('body').waitForImages(function() {
  // Images have loaded.
});

Answer 3

- Изменить: Этот ответ не является окончательным, только полезно.

Не обращай внимания. Это для изображений после , которые они загрузили. Вы хотите установить тайм-аут, как только они будут отображены. Вы бы сделали что-то немного другое в этом случае. При рендеринге каждого изображения вы устанавливаете тайм-аут «запуска», и если «загрузка» не отменяет это раньше 5 секунд, вы запускаете все, что хотите.

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

- Старый:

В самом деле, сэр, я полагаю, вы должны просто присоединиться к событию 'img' load '.

Возможно, что-то вроде:

// not tested, completely made up
$("img").load({ alert("foo"); });