Как догружать изображения после потери связи?

Question

[Alex]

Есть JS которые генерирует html с img. Во время вставки изображения подгружаются и если отключить интернет и снова включить, все не прогрузившиеся изображения так и останутся.

Каким образом можно сделать средствами html или js продолжение прогрузки всех img при появлении интернета снова?

Answer 1

[xmoonlight]

Писать свой обработчик загрузки контента и следить за кодами ошибок.

Comments

[Alex]

Не ужели нет готовой библиотеки на js для подобной ситуации?
И что за обработчик, какой принцип его работы ?

[xmoonlight]

alexjet73, https://developer.mozilla.org/ru/docs/XMLHttpRequest

[Alex]

xmoonlight, не совсем понимаю как можно через запрос XMLHttpRequest отследить какие изображения добавленные после ajax в контейнер div при помощи jquery(el).html(); не смогли прогрузится и как запустить процесс подгрузки изображений снова.

[xmoonlight]

alexjet73, надо загружать их через свой обработчик. Его надо написать на JS.

[Alex]

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

[xmoonlight]

alexjet73, вкратце: берём урл и разметки, грузим через аякс (контролируя ошибки), отмечаем, что ресурс - загружен, переходим к следующему урлу.
Гуглите по теме: PWA и LazyLoad

[Alex]

xmoonlight, а есть какие то возможности увидеть именно неудачно загруженные ресурсы на странице? Картинки, шрифты запросы? Просто при загрузке если прервать связь, то и шрифты могут не загрузится и запросы не выполняются.
По запросам еще есть некое понимание, там можно по .fail() зафиксировать невыполнение функции и добавить в некий массив данные об этом, чтоб потом запустить её заново при появлении интернета.
Получается чтобы следить за шрифтами и изображениями, их тоже нужно загружать через $.get например, чтобы ловить .fail()? Нет способа, который позволил бы отследить в DOM какие изображения не прогрузились и сделать рефреш src например, и шрифты так же?

[xmoonlight]

alexjet73, обработчик onerror на все изображения можно свой сделать (со шрифтами - надо смотреть...) и в нём - уже заполнять массив загруженных/не загруженных изображений.

Answer 2

[Олег]

https://github.com/hubspot/offline

Comments

[Alex]

Как его применить в моем случае не подскажите? Просто запускал из папки test два html index и snake, что то они сразу теряют соединение даже если интернет еще не отключался.
Да и что то в редми толком не написано, как его инициализировать в проекте :(

[Олег]

alexjet73, Если не разобрался за час, не значит, что там ничего нет)))
а вообще можешь проще проверять

var req = ({
method: 'GET',
url: 'http://yandex.ru' //любой ресурс, который 100% не ложится
});

$http(req).then(function successCallback(successData){
//при удачном запросе
},function errorCallback(errorData){
//при ошибке
});

[Alex]

Олег, вот нашел в гугле пример работы

Offline.options = {
            checkOnLoad: true,
            interceptRequests: true,
            requests: true,
            deDupBody: true
        };
        var run = function(){
            if (Offline.state === 'up')
                Offline.check();
        };
        setInterval(run, 1000);

В плане статуса оффлайн все работает, но requests и deDupBody почему то не работают. Т.е. после восстановления соединения, все запросы $.post и незагруженные ресурсы (шрифты, img и тд) не отправляются повторно для загрузки.
Хотя в редми вроде написано что requests вроде как складирует все запросы при отключении и потом их снова отправляет когда соединение появилось.