Как определить, что все ресурсы были показаны пользователю в браузере?

215

25 июля 2018, 10:40

У меня проблема в CEF. Все картинки, шрифты, скрипты находятся всегда в локальном хранилище, но из-за низкой производительности некоторых систем картинка может появится с большой задержкой либо с большой задержкой и дорисоваться в следующих кадрах.

Сам интерфейс в ReactJS отображается только как срабатывает функция window.onload()

Как можно заставить прелоадер проверить показаны ли тяжелые ресурсы (картинки в высоком качестве) на экране?

Answer 1

Используйте Image() конструктор. То есть нужно создавать имаджи из джаваскрипта и слушать их события "load".

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
   // execute statements here
}, false);
img.src = 'myImage.png'; // Set source path

Вот тут в секции "Creating an image from scratch" описано подробно. То есть у вас будет несколько колбэков, после вызова которых вам нужно сделать чтото. Это можно удобно сделать с помощью библиотки async, например метод every. Там прямо в примере по сути ваш кейс:

var images = [];
async.every(['image1','image2','image3'], function(filePath, callback) {
    var img = new Image();
    img.addEventListener('load', function() {
         callback();
    }, false);
    images.push(img);
    img.src = imagePath;
}, function(err, result) {
    // if result is true then every image is loaded
});