Как обнаружить, когда изображение закончило отдавать в браузере (т.е. нарисовало)?

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

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

22
nl ja de
@Jack Очень так, I' m боящийся. На очень больших изображениях резолюции, по крайней мере.
добавлено автор Andrei Oniga, источник
О, don' t говорят мне это!: (Я боялся, что это - то, что я услышал бы. Нет ли никакое решение поперечного браузера?
добавлено автор Andrei Oniga, источник
Фактическое предоставление изображения может зависеть от факторов, которые находятся вне вашего контроля (на конце user' s компьютер), как разработчик. Т.е. загрузка ЦП. Таким образом в конце, there' s все еще потребность события как ' painted'.
добавлено автор Andrei Oniga, источник
Поскольку, что точно необходимо знать, когда живопись закончилась? Скажите нам больше о вашем заявлении.
добавлено автор Bergi, источник
I' m curiuos: это находится на каком-либо определенном устройстве? И как высоко резолюции?
добавлено автор Shomz, источник
Вы на самом деле сталкиваетесь с заметным различием между .load событие изображения и фактическое предоставление?
добавлено автор Ja͢ck, источник
Я думаю, что только Firefox имеет события краски который мог быть чем-то, что вы могли использовать.
добавлено автор Ja͢ck, источник
That' s точно право. Я после object:resized событие (запущенный многократно как край объекта тянется мышью), но в отсутствие этого во всех браузерах, следующее лучшее может быть должно отследить after:rendering событие. Я видел используемый кем-то еще. Это не имеет никакого отношения к погрузке объекта. Я can' t используют object:changed событие. Это происходит только в конце (только однажды).
добавлено автор Yoichi, источник
Я примерил последние стабильные версии Хрома и FF, и там doesn' t, кажется, любая задержка между изображением, законченным рисовать и груз() вызванное событие: jsfiddle.net/cbhJn/7/embedded/result
добавлено автор adrian7, источник

4 ответы

Я использовал requestAnimationFrame, чтобы добиться цели. После того, как изображение загрузило его, будет предоставлен во время следующего кадра анимации. Таким образом, если вы будете ждать два кадра анимации, то ваше изображение будет предоставлено.

function rendered() {
    //Render complete
    alert("image rendered");
}

function startRender() {
    //Rendering start
    requestAnimationFrame(rendered);
}

function loaded()  {
    requestAnimationFrame(startRender);
}

See http://jsfiddle.net/4fg3K/1/

10
добавлено
Это doesn' t работа над любым главным браузером (проверил в напряжении 15, Хром 58 и FireFox 53): показы окна с предупреждением перед изображением закончили рисовать.
добавлено автор Gyum Fox, источник
Это на самом деле работало на меня, когда я поместил код в изображение onload отзыв. Проверенный в последнем Хроме и FF, IE 11, Сафари на iOS 10.3.3 и это работало везде (тревога появилась после того, как изображение было показано на экране). Изображение, которое я проверял, было также довольно большим (настольный и мобильный телефон на 500 КБ на приблизительно 2 МБ).
добавлено автор margaretkru, источник

Вам нужно onload событие на признак. Например:

function loadImage() {
  alert("Image is loaded");
}

источник

Если изображение - фон другого элемента, груз изображение в фоновом режиме (с простым Аяксом ПОЛУЧАЮТ запрос), и когда результат возвращается, установите фон после того, как это было загружено.

1
добавлено
Это не что I' m после. Поскольку Джек указал также: предоставление (живопись)! = загружающий
добавлено автор Andrei Oniga, источник

Обновление: не используйте этот подход - не работает в случаях, где размеры изображения установлены во что-то еще, чем дефолт

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

Более или менее это - то, как это могло посмотреть:

//this is NOT a real code
function checkIfRendered(img, onRender) {
    var elRatio = img.width()/img.height();
    var natRatio = img.naturalWidth/img.naturalHeight;

    if (elRatio === natRatio)
        onRender();
    else {
        setTimeout(function() {
            checkIfRendered(imgEl, onRender)
        }, 20);
    }
}

img.onload(checkIfRendered(img, function() { alert('rendered!'); }));
1
добавлено
Я полагаю, что браузер возвратит высоту и ширину зарезервированного пространства изображения в странице, не размер изображения, поскольку это окрашено.
добавлено автор Andrei Oniga, источник
Верный вы правы. Этот подход НЕ будет работать правильно, если будет некоторый CSS на изображении, которое устанавливает его ширину или высоту. Поэтому НЕ используйте этот apprach. Я собирался удалить этот ответ, но I' ll держат его здесь, так как это могло бы избавить кого-то от необходимости пробовать что-то подобное
добавлено автор phidias, источник

от mdn,

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

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

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)