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

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

1 个答案: