插入对象(jquery)延迟

Insert object (jquery) delay?

本文关键字：延迟 jquery 对象 插入      更新时间：2023-09-26

我允许用户插入一个对象，一个图像，然后在该对象上调用一个函数。对我来说似乎是随机的，有时它有效，有时不，我猜它与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);
}

因为如果我在一秒钟后用按钮手动触发最后一个函数，它总是有效的。

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

我尝试超时零与相同的结果-有时图像已经加载，有时没有，所以它随机工作，与较大的图像(花更长的时间在浏览器中加载)，它当然更频繁地失败。现在我已经绕过了它与秒超时，但这不是一个漂亮的解决方案:-/也许我可以把一个循环在查找('img')，不断检查图像，只进行一旦发现?但这有时会让我陷入无限循环问题?

这对你有用吗?

      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的id

不是在追加后立即查询DOM，而是存储对元素的引用，然后引用它。如:

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

另外，我可以发誓你不能设置一个对象的键为class，因为它是一个保留的标识符，没有引号…所以使用"class": "object_image"。此外，您在class值之后有一个额外的逗号…这是一个语法错误，至少在IE中。

可以使用jquery的load函数。下面是一个示例代码:

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

您是否尝试使用您已有的参考资料?

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

也许行得通

编辑:你可以在浏览器渲染后添加一个超时0来附加你的函数…

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

在图片加载后才能访问图片的宽度和高度。这就是为什么setTimeout有时对你有用。使用image.load()回调函数触发需要在图片加载后运行的代码。

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

您可以不使用jquery，只使用es5突变观察器和加载事件

(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

上有一个实例

您可以在mdn

阅读更多关于MutationObserver的信息
相关文章：