オブジェクト（jquery）の遅延を挿入しますか？

Question

私はオブジェクトとイメージを挿入することができます。そして、そのオブジェクトの関数を呼び出します。私に無作為に見えるものは、時にはうまくいくこともありますが、DOMはまだ更新されていないと思いますか？

//add a new image 
function add_image(img) { 

var objCount = count_objects() + 1; 
var objId = 'object_'+objCount; 

var myNewImg = jQuery('<div/>', { 
    id: objId, 
    class: 'object_image invisible', 
}).appendTo('#objectbox'); 

//sätt objektnamnet (användaren kan ändra senare) 
$('#'+objId).attr('namn', objId) 

//sätt låsta proportioner som standard 
$('#'+objId).addClass('lockedAspectRatio') 

//lägg till bilden i detta element 
var imgInner = jQuery('<img/>', { 
    id: objId, 
    class: 'object_image_inner', 
    src: img, 
}).appendTo('#'+objId); 



window.objectCounter++; 

prepare_editmode(); 

//reset the flag and the temporary image field now that image adding is complete 
$('#imageGhost').val(null); 

//fixa rätt storlek på bilden 
setTimeout(function(){ 
    restoreSize(myNewImg,imgInner); 
    $(myNewImg).removeClass('invisible'); 
}, 1500); 

} 

1秒後にボタンを押してその最後の機能を手動で起動すると、常に機能するためです。

function restoreSize(myImg,imgInside) { 

if (imgInside == null) { 
    console.log("nothing passed"); 
    var imgInside = $(myImg).find('img'); 
} 
else { 
    console.log("passed alright"); 
} 

//remove fixed dimensions on containing div 
$(myImg).css("height", 'auto'); 
$(myImg).css("width", 'auto'); 

//remove the 100% attribute on the image 
$(imgInside).css("width", 'auto'); 
$(imgInside).css("height", 'auto'); 

//get calculated dimensions of div once img original size determines it 
var newWidth = $(myImg).css("width"); 
var newHeight = $(myImg).css("height"); 

//...and set them firmly. 
$(myImg).css("width", newWidth); 
$(myImg).css("height", newHeight); 

//restore the height/width 100% property to image in case of new resize 
$(imgInside).css("width", '100%'); 
$(imgInside).css("height", '100%');  
} 

私は同じ結果とタイムアウトにゼロをしよう - それは、ランダムに動作しますので、時々画像が読み込まれ、時にはいないされてきた、大きな画像（ブラウザにロードするために長い時間を割い）と、それは当然のことながら、より頻繁に失敗します。今は秒のタイムアウトでそれをバイパスしましたが、それほど解決策ではありません： - /おそらく、一度見つかったばかりの画像だけを確認し続けるfind（ 'img'）にループを置くことができますか？しかし、それはしばらくの間、無限のループ問題に悩まされるかもしれませんか？

Answer 1

これはあなたのために働くことができますか？

 function add_image(img) { 
     var objCount = count_objects() + 1; 
     var objId = 'object_' + objCount; 

     var myNewImg = jQuery('<div/>', { 
      id: objId, 
      class: 'object_image invisible' 
     }).appendTo('#objectbox'); 

     $('#' + objId).attr('namn', objId) 

     $('#' + objId).addClass('lockedAspectRatio') 

     var imgInner = jQuery('<img/>', { 
      id: objId, 
      'class': 'object_image_inner', 
      src: img 
     }).load(function() { 
      imgInner.appendTo('#' + objId) 
      restoreSize(myNewImg, imgInner); 
      $(myNewImg).removeClass('invisible'); 
     }); 

     window.objectCounter++; 

     prepare_editmode(); 

     //reset the flag and the temporary image field now that image adding is complete 
     $('#imageGhost').val(null); 
    } 

とところで、あなたは、あなたが画像をロードした後まで、イメージの幅と高さにアクセスすることはできませんmyNewImgとimgInner

Answer 2

あなたはすでに持っているリファレンスを試しましたか？

var obj = jQuery('<div/>', { 
    id: objId, 
    class: 'object_image', 
}).appendTo('#objectbox'); 

restoreSize(obj); 

多分それは

EDIT作品：

var obj = jQuery('<div/>', { 
     id: objId, 
     class: 'object_image', 
    }).appendTo('#objectbox'); 

    setTimeout(function(){ restoreSize(obj) }, 0); 

Answer 3

代わりの直後DOMを照会... あなたは、ブラウザのレンダリング後に機能を追加するために、タイムアウト0を置くことができますが追加するだけで、要素への参照を格納してから参照してください。同様に：

var div = jQuery("<div/>", { 
    id: objId, 
    "class": "object_image" 
}).appendTo("#objectbox"); 
restoreSize(div); 

また、私はあなたがそれが予約済みの識別子ですので、引用符なしで、classとしてオブジェクトのキーを設定し...そう"class": "object_image"を使用することはできません宣誓ていたかもしれません。また、classの値の後に余分なカンマがありました。これは少なくともIEでは構文エラーです。

Answer 4

の重複のIDをしました。なぜあなたのためにsetTimeoutが動作するのか image.load（）コールバック関数を使用して、イメージのロード後に実行する必要のあるコードをトリガします。

var imgInner = jQuery('<img/>', {   
     src: img 
    }).load(function() { 
     jQuery(this).appendTo('#' + objId) 
     restoreSize(myNewImg, this);   
     //and so on 
    }); 

Answer 5

uはjqueryのload functionを使用できます。ライブの例では、され、あなたはjqueryのせずにそれを行うことができます

http://jsfiddle.net/UhUb7/

var images = [ 
    "http://upload.wikimedia.org/wikipedia/commons/4/4b/Apple_pie.jpg" 
      ] 

$(document).ready(function(){ 
    addImage(images[0]); 
}); 

function addImage(url){ 
    var holder = $('<div class="object_image invisible">'); 
    var image = $('<img src="'+url+'" />'); 
    holder.append(image); 
    $("#objectbox").append(holder); 

    image.load(function(){ 
     holder.show('slow'); 

     // alert(image.css("width")); 
    }); 
} 

Answer 6

だけES5変異オブザーバとloadイベントを使用

(function (global) { 
    "use strict"; 

    if (!("MutationObserver" in global)) { 
     global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver; 
    } 

    function loadImage(e) { 
     var img = e.target, 
      width = img.clientWidth, 
      height = img.clientHeight; 

     img.removeEventListener('load', loadImage, false); 
     alert("Image loaded: width: " + width + " height: " + height); 
    } 

    var observer = new MutationObserver(function (mutations) { 
     mutations.forEach(function (mutation) { 
      switch (mutation.type) { 
      case 'childList': 
       Array.prototype.forEach.call(mutation.target.children, function (child) { 
        if (child.id === "smiley") { 
         child.addEventListener('load', loadImage, false); 
        } 
       }); 

       break; 
      default: 
      } 
     }); 
    }); 

    var container = document.getElementById("container"); 

    observer.observe(container, { 
     childList: true, 
     characterData: true, 
     subtree: true 
    }); 

    container.innerHTML = "<img id='smiley' src='http://1.bp.blogspot.com/-b1Z0R5ExM9s/TdWbeGQ-wdI/AAAAAAAAAPI/Ft52XTSxs0s/s1600/blue+sky+wallpaper+%25289%2529.jpg'/>"; 
}(window)); 

：ここにあなたのコードを持つ例です。 on jsfiddle

について詳しく読むことができます0 at mdn