Question

我有以下工作代码：

// Get photos from file and load first initial photo
$.ajax({
    type: "GET",
    url: "photos_gps.json",
    success: initialPhoto,
    error: handleError
});

function initialPhoto(data){

    console.log(data);

    var img_tag = "<img id=" + '"photoBox" src=' + "'photos/" + data[0].Filename + "' />";

    console.log("Img_tag: " + img_tag); 
    $('#mainBox').prepend(img_tag); 
    photos = data;

    setTimeout(function() {
        console.log($('#photoBox').height());
        console.log($('#photoBox').width());
    }, 1000);
}

首先，我正在加载一个包含有关图像信息的文件。成功后，我选择第一个图像并将其添加到DOM元素之前。当我记录不带setTimeOut函数的图像的宽度和高度时，值将均为0，而使用setTimeOut函数3648和5472。

我想摆脱setTimeOut函数，所以我尝试了以下回调函数：

$('#mainBox').prepend(img_tag, function() {
    console.log($('#photoBox').height());
    console.log($('#photoBox').width());
});

这会导致在图片下方添加以下文本：

function（）{console.log（$（'＃photoBox'）。height（））; console.log（$（'＃photoBox'）。width（））; }

好像我还不懂回调...

Answer 1

虽然jQuery的.prepend方法确实具有回调函数，但该回调函数需要：

返回HTML字符串，DOM元素，文本节点或jQuery对象，以插入到匹配元素集中每个元素的开头

您的height元素的width和img最初是0的原因是图像尚未加载，以及使用{延迟执行的原因{1}}的作用是您的图像在延迟执行开始之前就已加载。

要在没有.setTimeout的情况下完成此操作，请为图像的.setTimeout事件添加事件侦听器：

load

另外，What is a callback function?是学习更多有关回调函数的好地方。

回调而不是setTimeout

1 个答案: