Question

这里有初学者问题。我正在使用JavaScript和jQuery构建照片查看器。

当你点击箭头看下一张图片时，我希望当前的图片淡出，然后下一张图片淡入。我遇到的问题是如果图片需要更长时间才能加载，当淡入淡出开始的时候，我仍然把旧照片放在那里，所以我需要的是确保在新照片加载之前淡入不会启动。

因此，必须运行这三个语句，只有在前一个语句被执行时才执行：

$('#image').fadeOut(500);
getImage();
$('#image').fadeIn(500);

这是获取新图像的功能：

getImage = function() {
    document.getElementById("image").src = "Images/Image" + counter + ".jpg";
}

其中counter是我之前声明的变量，当你点击＆＃34; next＆＃34;按钮等...

所以，我不太了解编程，我正在寻找一种确保

的方法

$('#image').fadeIn(500);

除非已经提取了新图像，否则不会运行，或者旧图像开始淡入，然后我们会获得新图像。

我试着回电话，如下：

$('#image').fadeOut(500, function() {
        getImage();
});

$('#image').fadeIn(500);

但是这并不起作用，因为你需要在后备中退缩而且我不知道如何做到这一点。

我尝试的另一件事是做这样的事情：

var hasloaded = $('#image').fadeOut(500, function() {
    getImage();
});

if (hasloaded)
{$('#image').fadeIn(500);}

这也不起作用，虽然我在写作时觉得我很聪明。

任何帮助表示感谢。

感谢。

Answer 1

您可以创建JavaScript load对象，并在src事件中将$('#image').fadeOut(500, function () { getImage(function () { $('#image').fadeIn(500); }); }); getImage = function (cb) { var img = new Image(); img.onload = function () { document.getElementById("image").src = img.src; cb(); }; img.src = "Images/Image" + counter + ".jpg"; }设置为目标元素

$('#image').fadeOut(500, function () {
    getImage().then(() => {
        $('#image').fadeIn(500);
    });
});

getImage = function () {
    return new Promise((resolve, reject) => {
        var img = new Image();
        img.src = "Images/Image" + counter + ".jpg";
        img.onload = function () {
            document.getElementById("image").src = img.src;
            resolve("Success!");
        };
    });
}

使用promise()

<form action="" id="form-product" method="post" name="product" enctype="multipart/form-data">
 <input type="text" name="title"id="title">
 <input type="button" name="save" value="validate" onclick="_validate()">  
 <input type="button" name="submit" onclick="_submit()" value="enter">
</form>

<script>
function _validate(){
    console.log("add your validation method here");
    // add your validation method here.
}
function _submit(){
   console.log("submit your form without validation");
   //just submit your form
}
</script>

声明仅在前一个语句执行后才开始

1 个答案: