回调而不是 setTimeout

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 方法确实采用回调函数，但该回调函数需要：

returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the beginning of each element in the set of matched elements

您的 img 元素的 height 和 width 最初是 0 的原因是图像尚未加载，以及延迟执行的原因.setTimeout 的工作原理是您的图像在延迟执行开始之前加载。

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

function initialPhoto(data) {
    console.log(data);

    var img_tag = $('<img />', {
        id: 'photoBox',
        src: 'photos/' + data[0].Filename,
    }).on('load', function (e) {
        console.log($('#photoBox').height());
        console.log($('#photoBox').width());
    });

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

此外，What is a callback function? 是了解更多有关回调函数的好地方。

回调而不是 setTimeout

Callback instead of setTimeout

ajax

jquery

image

callback

prepend