Отобразить изображение «загрузки» до загрузки оригинальных изображений в «приложении галереи изображений» - стиль metro - PullRequest
Новая
       22

Отобразить изображение «загрузки» до загрузки оригинальных изображений в «приложении галереи изображений» - стиль metro

2 голосов
/ 15 февраля 2012

Я занимаюсь разработкой приложения для галереи изображений ..

Загрузка изображений из Интернета ..

Я собираю URL-адрес изображения в массив и связываю его в виде списка...

Работает нормально .. Но моя проблема в том, что изображения показывают крестик ('X') до загрузки изображений.

То, что я ожидаю, это

  1. Отображение загрузочного изображения для каждого изображения до тех пор, пока не будет загружено исходное изображение

  2. , если 1 невозможно, как я могу удалить крестик?

Ответы [ 2 ]

2 голосов
/ 15 февраля 2012

Один из подходов состоит в том, чтобы установить для src прозрачный gif размером 1x1, установить размеры для конечного размера изображения, фоновое изображение для загрузки изображения, а затем использовать JavaScript для загрузки изображения и onload поменять его на заполнитель gif

пример

HTML 

<img src="images/spacer.gif" alt="Big Image" border="0" id="big_image" style="background-image:url('loading.gif');" width="3396" height="2347" />

JS 

var I = new Image();
I.onload = function () {
    document.getElementById('big_image').src = I.src;
};
I.src = 'http://apod.nasa.gov/apod/image/0911/ngc2623_hst_big.jpg';
1 голос
/ 15 февраля 2012

Вы не можете удалить метку 'X', так как это особенность браузера. Однако вы можете настроить свои изображения так, чтобы они имели фоновое изображение загружаемого изображения.

простой пример: 

<img src="" style="background-image: url(loadingimage.gif)" />

Таким образом, ваш загрузчик появляется и маскируется при загрузке полного изображения.

...