javascript - jQuery - 在追加之前成功在 AJAX 中预加载图像

Question

我将向您展示我使用的函数的完整代码，而不会对其进行太多简化，因为当我简化它时，一切都会正常工作。这是:

function add(z){
    bildurl = $(z).attr('data-bildurl');
    produktid = $(z).attr('data-produktid');


        $.ajax({
            type: 'post',
            url: 'convert.php',
            async: true,
            data: {produktid: produktid, bildurl: bildurl},
            success: function() {   

                currentid = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 6);


                currentzindex = currentzindex + 1;

                $('#baukasten').append(
                    '<div class=\"drag\" id="' + currentid + '" style=\"display: inline-block; cursor: all-scroll; z-index: ' + currentzindex + '; position: absolute; border: 1px solid #000000;\" onmousedown=\"mach(this);\"><img src=\"png/' + produktid + '.png" class=\"resize\"><img src=\"close.png\" class=\"close\" style=\"width: 16px; cursor: pointer; position: absolute; top: 5px; right: 5px;\" data-raus=\"' + currentid + '\" onclick=\"raus(this);\"><img src=\"resize.png\" class=\"res\" style=\"width: 18px; position: absolute; bottom: 5px; right: 5px;\" data-res="' + currentid + '"><\/div>'
                ); // here is the problem



                $( ".drag" ).draggable({
                    containment: "#grenze"
                });

                $( ".resize" ).resizable({
                    maxHeight: 500,
                    maxWidth: 500,
                    minHeight: 50,
                    minWidth: 20,
                    aspectRatio: true,
                    handles: "se",
                    distance: 50
                });
            }
        });
}

在评论中你可以看到问题出在哪里，有时它附加没有问题，有时无论我是否清除缓存都没有问题，但当我调用 add 时它总是附加这些东西两次使用完全相同的东西。我可以在这里做什么才能使它始终有效？我无法在 AJAX 之前预加载 png 图像，因为 png 图像是在 Convert.php 中创建的

我希望我的问题可以理解，并对我的英语不好感到抱歉:D

Answer 1

解决方案如下:

        var image = new Image();

        $(image).on('load', function(){

            $('#baukasten').append(
                '<div class=\"drag\" id="' + currentid + '" style=\"display: inline-block; cursor: all-scroll; z-index: ' + currentzindex + '; position: absolute; border: 1px solid #000000;\" onmousedown=\"mach(this);\"><img src=\"png/' + produktid + '.png" class=\"resize\"><img src=\"close.png\" class=\"close\" style=\"width: 16px; cursor: pointer; position: absolute; top: 5px; right: 5px;\" data-raus=\"' + currentid + '\" onclick=\"raus(this);\"><img src=\"resize.png\" class=\"res\" style=\"width: 18px; position: absolute; bottom: 5px; right: 5px;\" data-res="' + currentid + '"><\/div>'
            );

            $( ".drag" ).draggable({
                containment: "#grenze"
            });

            $( ".resize" ).resizable({
                maxHeight: 500,
                maxWidth: 500,
                minHeight: 50,
                minWidth: 20,
                aspectRatio: true,
                handles: "se",
                distance: 50
            });

            $('#lightbox').hide();
        });

        image.src = "http://www.bla.com/test/png/" + produktid + ".png";

    }
});

即使机会是 0.001%，也会有人需要它 xD