6

ユーザーがオブジェクト、画像を挿入できるようにしてから、そのオブジェクトの関数を呼び出します。私にはランダムに思えますが、うまくいくこともあればうまくいかないこともあります.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') に置くことができますか? しかし、それは時々無限ループの問題に私を突き刺すかもしれませんか?

4

6 に答える 6

2

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

      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);
     }

ところで、あなたは重複したIDを持っていmyNewImgますimgInner

于 2013-04-12T16:40:55.483 に答える
1

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"));
    });  
}
于 2013-04-16T12:26:09.303 に答える
1

追加直後に DOM を照会する代わりに、要素への参照を保存してから参照します。お気に入り：

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

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

于 2013-04-08T14:06:28.023 に答える
0

既にお持ちのリファレンスを使用してみましたか?

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

restoreSize(obj);

多分それは動作します

EDIT：ブラウザのレンダリング後に関数を追加するためにタイムアウト0を設定できます...

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

    setTimeout(function(){ restoreSize(obj) }, 0);
于 2013-04-08T14:05:50.577 に答える
0

es5ミューテーションオブザーバーとロードイベントを使用するだけで、jqueryなしで実行できます

(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));

実際の例はjsfiddleにあります

MutationObserverの詳細については、mdn を参照してください。

于 2013-04-17T18:54:05.987 に答える