Асинхронная загрузка изображений с помощью JavaScript

Question

Существует ли способ отображения загрузочного изображения для динамических изображений, созданных с помощью Flickr? Я нашел способ сделать это, как показано на сайте Wacom Community , но я не смог заставить его работать. Есть ли что-то попроще или у кого-то есть лучшее объяснение, чем у создателя техники из http://blog.realmofzod.com/asynchronous-image-loading-with-jquery/?

Answer 1

Я только что получил это работает. YMMV:

<img src="images/blank.gif" onload="replaceImage(this, 'flickrthumbnailimageurl')"
width="75" height="75" />

А потом replaceImage:

function replaceImage(img, replacementImage)
{
    img.onload = null;
    img.src = replacementImage;
}

blank.gif - это сплошное серое изображение размером 1x1 пиксель. По сути, идея заключается в том, что это пустое изображение загружается и расширяется до 75x75 (для сохранения макета). Это почти сразу запускает обработчик загрузки, который изменяет источник изображения на желаемое изображение. Он дает желаемый эффект.

Answer 2

может сделать это с помощью jquery:

<img src="http://myimages.com/loaderImage.jpg" id="imgIdLoading" />
<img src="http://flickr.com/image.jpg" id="imgId" style="display:none;" />

$('#imgId').load(function(){
    // ... loaded
    $('#imgIdLoading').remove();
    $('#imgId').show();  
}).error(function(){
    // ... not loaded
    $(this).attr('src','/whatever/error.png');
});