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

Question

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

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

Это возможно?

Answer 1

Я думаю, что вы, возможно, установили document.ready с window.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"); });