как ждать загрузки изображения, прежде чем запрос с JQuery

Question

Пример: http://jsfiddle.net/forgetcolor/rZSCg/3/

Учитывая набор Div переполнение: авто, что будет (скорее всего) содержат изображение больше, чем окно, я пытаюсь выяснить способ дождаться загрузки этого изображения до запроса его свойств. Свойством, которым я занимаюсь, является его внутренняя ширина, минус ее полоса прокрутки. Благодаря предыдущему вопросу о стеке (http://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar) У меня есть способ сделать это , но это работает только с небольшим крошечным изображением или с одним в кеше. Когда он получает большое изображение, код, выполняющий запрос, выполняется до того, как изображение будет загружено.

Что я хочу - это способ дождаться загрузки этого изображения перед выполнением запроса. Есть идеи?

Полный пример: http://jsfiddle.net/forgetcolor/rZSCg/3/

Javascript:

// using a random appended to the URL to simulate non-cached 
// varying images 
var r = Math.floor((Math.random()*100000)+1); 
$('#box1').html("<img src='http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?"+r+"' />"); 
var helperDiv = $('<div />'); 
$('#box1').append(helperDiv); 
$('#iw').text("inner width is: " + helperDiv.width()); 
helperDiv.remove(); 

Answer 1

var r = Math.floor((Math.random()*100000)+1); 
    var newImage = new Image() 
    $(newImage).load(function(){ 
     $('#iw').text("inner width is: " + newImage.width); 
    }); 
    newImage.src = 'http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?'+r 

Проблема вы столкнулись является ABIT более сложным. Изображения из DOM имеют странное поведение загрузки, где события onload не всегда срабатывают. Поэтому размещение изображения в div, ожидающем, когда элемент DOM начнет работать, не будет работать.

В результате нам нужен встроенный объект изображения javascript. (недавно узнал), что этот объект решит ваши проблемы. Сначала, пока вы установите ваш .load прослушиватель, прежде чем устанавливать источник изображения, он будет запускать загрузку каждый раз в каждом браузере. После того, как нагрузка возникла, потому что ее объект изображения, вам не нужно добавлять его на страницу, чтобы получить ее высоту и ширину, эти свойства встроены.

Answer 2

поместить все, что вы хотите сделать в

$("img").load(function(){...});