Если изображение начала загрузки, показать DIV

В следующем, я полагаю, ждет, пока изображение не будет полностью загружен:Если изображение начала загрузки, показать DIV

$('.some-img').load(function(){ 
    $('.img-container').show(); 
});

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

Высота контейнера реагирует height: auto, а изображения имеют разную высоту, поэтому контейнер начинается без высоты (всего 20px отступов), а затем быстро регулирует его высоту в зависимости от высоты изображения внутри него, что является своего рода решетка каждый раз, когда она загружается.

Есть ли способ проверить, если изображение начала загрузки, так что я могу регулировать высоту контейнера в Image, затем сделать $('.imagemodal-container').show(), как ожидание всего изображения для загрузки не хороший UX.

источник

2016-03-20 frosty

Я не верю, что вы можете получить высоту изображения до тех пор, пока не будет сделан загрузка, поэтому не уверен, что ваша стратегия будет работать. Обычно для резервирования пространства изображение должно отображаться с использованием значений высоты/ширины, и браузер резервирует пространство, не нужно js. –

Можете ли вы начать с [этого] (http://stackoverflow.com/questions/6575159/get-image-dimensions-with-javascript-before-image-has-fully-loaded) и изменить его в соответствии с вашими потребностями? Если у вас есть вопросы, обновите его в своем вопросе. – sabithpocker

Спасибо! Я скорректировал его, и это сработало. Я отправлю свой ответ. – frosty

Использования функции getImageSize из this answer:

function getImageSize(img, callback) { 
     var $img = $(img); 

     var wait = setInterval(function() { 
      var w = $img[0].naturalWidth, 
       h = $img[0].naturalHeight; 
      if (w && h) { 
       clearInterval(wait); 
       callback.apply(this, [w, h]); 
      } 
     }, 30); 
}

Поскольку образами, которые больше ширины IMG обертки (600px) масштабируются вниз, чтобы соответствовать, я должен был регулировать высоту на основе соотношения, а также принимать во внимание постоянных отступов 20px + 20px сверху и снизу:

getImageSize($('.showcase-img'), function(width, height) { 
    width > 600 ? calculatedHeight = 600/width * height + 40 : calculatedHeight = height + 40; 
    $('.showcase-img-wrapper').css("height", calculatedHeight+"px"); 
    $('.imagemodal-container').show(); 
});

источник

2016-03-20 16:29:29 frosty

Если изображение начала загрузки, показать DIV

ответ

Смежные вопросы