Обратный вызов jQuery при загрузке изображения (даже когда изображение кэшируется) - PullRequest
Новая
       26

Обратный вызов jQuery при загрузке изображения (даже когда изображение кэшируется)

274 голосов
/ 07 октября 2010

Я хочу сделать: 

$("img").bind('load', function() {
  // do stuff
});

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

Ответы [ 14 ]

1 голос
/ 12 октября 2012

У меня была эта проблема с IE, где e.target.width было бы неопределенным.Событие load сработало бы, но я не смог получить размеры изображения в IE (chrome + FF работал).

Оказывается, вам нужно искать e.currentTarget.naturalWidth & e.currentTarget.naturalHeight .

Еще раз, IE делает все по-своему (более сложным) способом.

1 голос
/ 13 февраля 2012

Я могу дать вам небольшой совет, если вы хотите сделать так: 

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

Если вы сделаете это, когда браузер кеширует изображения, не всегда будет отображаться img, но загружается img под реальным изображением.

0 голосов
/ 10 июня 2016

Если вам нужно чистое решение CSS, этот прием работает очень хорошо - используйте объект transform. Это также работает с изображениями, когда они кэшированы или нет:

CSS: 

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML: 

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

Пример кодекса

Пример кодекса LESS

0 голосов
/ 09 января 2011

Вы можете решить свою проблему, используя плагин JAIL , который также позволяет лениво загружать изображения (повышая производительность страницы) и передавая обратный вызов в качестве параметра 

$('img').asynchImageLoader({callback : function(){...}});

HTML должен выглядеть как 

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />
Страница:
...