при загрузке изображения по-прежнему отображается значок «загрузка изображения браузера» - PullRequest
Новая
       17

при загрузке изображения по-прежнему отображается значок «загрузка изображения браузера»

0 голосов
/ 14 июня 2010

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

 $('img.loadable-image').css('background', 'transparent url(/images/ajax-loader1.gif) no-repeat center center')
$('img.loadable-image').load(function() { $(this).css('background', ''); });

это работает так, что показывает мой значок загрузки ajax, пока изображения не будутскачал, но также показывает фон

вот мое оригинальное изображение html: 

<img class="loadable-image" src="mysite.com/validimage.jpg" border="0" height="50" width="50">

вот скриншот того, что я получаю:

altтекст http://img820.imageshack.us/img820/3289/ajaxload.png

как вы можете видеть слева, вы видите маленький загрузчик ajax, но также видите квадрат отсутствующего изображения вокруг него.

есть предложения?

1 Ответ

3 голосов
/ 14 июня 2010

См. http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2,, в котором указано, что тег <img> должен иметь атрибут src.

Отсутствующий квадрат будет вызван атрибутом src тега <img>.Если для него не задан действительный URL-адрес изображения, вы получите кадр «испорченное изображение».Установите src вместо фона (или установите для него прозрачное изображение) или измените его на элемент <span> вместо элемента <img>.

Недопустимо, нет src attribute == "значок "неработающее изображение": 

<img alt="" style="width:50px; height:50px; background-image:url(bg.gif)" />

действительный, с атрибутом src: 

<img alt="" src="transparent.gif" 
     style="width:50px; height:50px; background-image:url(bg.gif)" />

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

  • Если у вас есть контроль над изображениями, заставляет их загружаться постепенно (сохранить GIF / PNG как чересстрочный, JPEG как прогрессивный).
  • Если у вас нет контроля над изображениями, оберните изображение, скрытое в промежутке, примените фоновое изображение к элементу промежутка и покажите изображение при возникновении события загрузки.

Пример: 

<span class="loadable-image-container">
    <img class="loadable-image" src="mysite.com/validimage.jpg" 
        border="0" height="50" width="50">
</span>

jQuery, что-то вроде: 

$('img.loadable-image-container')
    .css('background', 
      'transparent url(/images/ajax-loader1.gif) no-repeat center center')
    .children().css('visibility', 'hidden');

$('img.loadable-image').load(function() { 
    $(this)
        .css('visibility', 'visible')
        .parent().css('background', ''); 
});
...