jquery - Javascript wait for image to load before calling Ajax -


function dropresource() {      var imgindex = getimageindexbyid(currentdragimageid);     var newimgid = resourcedata.length;      // create image     $('#thepage').append('<img alt="big" id="imga' + newimgid + '" src="' + uploadfolder + '/' + imgdata[imgindex][1] + '" class="mediaimg" />');      // properties     var imgw = $('#imga' + newimgid).width();     var imgh = $('#imga' + newimgid).height();     var imgx = $('#imga' + newimgid).position().left;     var imgy = $('#imga' + newimgid).position().top;      // add array (dbid, imgarrindex, width, height, x, y)     resourcedata[newimgid] = new array(0, imgindex, imgw, imgh, imgx, imgy);      //alert('artworkajaxhandler.ashx?type=addresource&uploadid=' + currentdragimageid + '&page=' + currentpage + '&w=' + imgw + '&h=' + imgh + '&x=' + imgx + '&y=' + imgy);      // save resource         $.ajax({     url: 'artworkajaxhandler.ashx?type=addresource&uploadid=' + currentdragimageid + '&page=' + currentpage + '&w=' + imgw + '&h=' + imgh + '&x=' + imgx + '&y=' + imgy, 

this code adds image drop area once thumbnail has been dropped in. problem is, width , height of image coming out 0,0 because ajax called before image has chance load... if uncomment out alert, , wait until image loads works fine.

is there anyway around this?

i'd rearrange things bit:

function dropresource() {      var imgindex = getimageindexbyid(currentdragimageid);     var newimgid = resourcedata.length;     var newimage;      // create image     newimage = $('<img alt="big" id="imga' + newimgid + '" src="' + uploadfolder + '/' + imgdata[imgindex][1] + '" class="mediaimg" />');     newimage.load(function() {         // properties         var imgw   = newimage.width();         var imgh   = newimage.height();         var imgpos = newimage.position();         var imgx   = imgpos.left;         var imgy   = imgpos.top;          // add array (dbid, imgarrindex, width, height, x, y)         resourcedata[newimgid] = new array(0, imgindex, imgw, imgh, imgx, imgy);          //alert('artworkajaxhandler.ashx?type=addresource&uploadid=' + currentdragimageid + '&page=' + currentpage + '&w=' + imgw + '&h=' + imgh + '&x=' + imgx + '&y=' + imgy);          // save resource             $.ajax({         url: 'artworkajaxhandler.ashx?type=addresource&uploadid=' + currentdragimageid + '&page=' + currentpage + '&w=' + imgw + '&h=' + imgh + '&x=' + imgx + '&y=' + imgy,     });     $('#thepage').append(newimage); 

what create img element, hook load event, , add dom (by appending #thepage element). of other actions take place within load handler. note make sure hook load handler before appending dom, load event doesn't fire before hook it.

if want careful, might hold off setting src property until after hook load, sure. that, change:

    newimage = $('<img alt="big" id="imga' + newimgid + '" src="' + uploadfolder + '/' + imgdata[imgindex][1] + '" class="mediaimg" />');     newimage.load(function() {        // ...     });     $('#thepage').append(newimage); 

to

    newimage = $('<img alt="big" id="imga' + newimgid + '" class="mediaimg" />');     newimage.load(function() {        // ...     });     newimage[0].src = uploadfolder + '/' + imgdata[imgindex][1];     $('#thepage').append(newimage); 

Comments

Popular posts from this blog

python - Scipy curvefit RuntimeError:Optimal parameters not found: Number of calls to function has reached maxfev = 1000 -

c# - How to add a new treeview at the selected node? -

java - netbeans "Please wait - classpath scanning in progress..." -