jQuery的 - 预先加载AJAX成功之前的图像追加
问题描述:
我要告诉你我使用的功能的完整代码,而不是简化它太多,因为当我简化它的一切工作正常。那就是:jQuery的 - 预先加载AJAX成功之前的图像追加
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图像,因为在convert.php
越来越创建PNG图像,我希望我的问题是一种可以理解的,对不起我的英文不好:d
答
这里是解决方案:
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
我没有经历过整个代码消失了,因为它是相当漫长和难以测试。但这听起来像是图像没有加载的问题?你有没有想过尝试waitForImages - https://github.com/alexanderdickson/waitForImages? –
感谢您的回复,您是否看到更新?当我调用$(“.drag”).draggable({和$(“.resize”).draggable({像1秒超时那么它工作正常,它会在映像完全加载后执行,但我怎么做它只是当AJAX的成功只是100%完成?这意味着追加等完成 –