Проблема с загрузкой для индикатора выполнения для предварительно загруженных изображений

Question

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

var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();

Image1.onload = moveProgressBar();
Image2.onload = moveProgressBar();
Image3.onload = moveProgressBar();

Image1.src = url;
Image2.src = url;
Image3.src = url;

Что-то странное происходит, так как они сразу же запускают функцию moveProgressBar (), хотя изображения еще не загружены полностьюЭто происходит даже при приближении к странице без кеша и с кешем.Я что-то пропустил?Любая помощь будет оценена.

Answer 1

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

Image1.onload = moveProgressBar; // note the lack of ()

Answer 2

Событие js onload на изображениях - большой беспорядок. Разные браузеры обрабатывают его по-разному, а разные версии (в основном IE) обрабатывают его по-разному. Кроме того, в большинстве браузеров есть ошибочные ошибки.

Вот краткий контрольный список:

1. установите вашу нагрузку ДО того, как вы установите свой src. (Подождите, это станет более причудливым ...)
2. Также обрабатывать ошибки.
3. Обработка изображений, которые уже были кэшированы. Иногда они не будут стрелять по нагрузке, в то время как другие они будут стрелять и делать это немедленно.
4. Используйте универсальную функцию пояса и подтяжки setTimeout () - функцию, которая запрашивает, имеет ли изображение ширину или высоту в DOM. Это делается по-разному в разных браузерах / версиях, что означает, что вам нужно будет использовать функцию обнаружения, начиная с naturalWidth, а затем перейти к getAttribute (width) до image.width.

И тогда, возможно, у вас все еще будут некоторые ошибки ... но вы будете знать, только если вы протестируете все браузеры / версии, которые вы намереваетесь поддерживать.