Сценарий для предварительной загрузки изображений, а затем запустить обратный вызов, когда они есть?

Question

Можно ли как-нибудь загрузить изображение с помощью javascript, а затем запустить обратный вызов после его завершения?

Спасибо за любые идеи.

Answer 1

Вы пробовали это?

var img = new Image();
img.onload = function(){ alert('loaded'); };
img.src = '/some/image.jpg';

UPDATE

уверен, что вы можете установить фоновое изображение элемента с этим. Используйте событие onload, чтобы делать что угодно!

// change background to image - only after image completely loaded
function setBackroundImage(node, imageUrl) {
  var img = new Image();
  img.onload = function() {
    node.style.backgroundImage = imageUrl;
  }
  img.src = imageUrl;
}

setBackroundImage (document.getElementById ('foobar'), '/some/image.jpg');

Answer 2

Вот пример кода для обработки загрузки изображения:

var img = document.createElement('img')
img.src = 'https://www.google.com/intl/en_com/images/srpr/logo3w.png'
$(img).load(function(){ alert('Image loaded')})
$('#container').append(img)