Question

好吧我正在使用AJAX来回收JSON数据，其中包含有关接下来应该发生什么的信息...基本上我使用css类hide / show我从images / wrapper中添加/删除和加载.png图像

但即使我添加/删除显示/隐藏图像，然后添加新图像src，然后在新图像上添加添加/删除css类。

即使你按照这个顺序这样做，有时当添加隐藏/显示类时，它仍然是旧图片，在它变为下一个图像src之前一瞬间

我试图在结束时延迟150毫秒，但它仍然

function newImage(voteValue, imgValue, checked) {
    if (checked == "") {
        var innerVotingWrapper = document.getElementById('innerVotingWrapper');
        innerVotingWrapper.innerHTML = "Du skal vælge en kategori";
        console.log(checked);
    } else {
        var loadingWrapper = document.getElementById('loadingWrapper');
        var imgSrc = document.getElementById('imgSrc');
        var globalRating = document.getElementById('globalRating');

        globalRating.classList.add("hide");
        globalRating.classList.remove("show");
        imgSrc.classList.add("hide");
        imgSrc.classList.remove("show");
        loadingWrapper.classList.add("show");
        loadingWrapper.classList.remove("hide");

        var http = new XMLHttpRequest();
        var url = "pages/newImage.php";
        var params = "voteValue=" + voteValue + "&imgValue=" + imgValue + "&checked=" + checked;
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.onreadystatechange = function () {
            if (http.readyState === 4 && http.status === 200) {
                var jsonData = JSON.parse(this.responseText);

                setTimeout(func, 1000);

                function func() {
                    console.log(this.responseText);
                    console.log(jsonData.checked);
                    loadingWrapper.classList.add("hide");
                    loadingWrapper.classList.remove("show");

                    if (jsonData.imgSrc) {
                        imgSrc.src = jsonData.imgSrc;

                    }
                    if (jsonData.id) {
                        var imgValue = document.getElementById('imgValue');
                        imgValue.value = jsonData.id;
                    }
                    if (jsonData.empty) {
                        console.log('Ikke flere billeder');
                        var innerVotingWrapper = document.getElementById('innerVotingWrapper');
                        innerVotingWrapper.innerHTML = "Du har votet alle billeder kom tilbage om 24timer";
                    }


                    function showImg() {
                        globalRating.classList.add("show");
                        globalRating.classList.remove("hide");
                        imgSrc.classList.add("show");
                        imgSrc.classList.remove("hide");
                    }
                    setTimeout(showImg, 150);
                }
            }
        };
        http.send(params);
    }
}

Answer 1

认为好的解决方案就是重新生成img html标签。

通过更改img src，不要强制导航器升级它。

要生成img标记，请执行以下操作：

var newImg = document.createElement("img"); newImg.src = jsonData.imgSrc;

然后你需要删除imgSrc并添加newImg。

var parent = imgSrc.parentNode; parent.appendChild(newImg); parent.removeChild(srcImg);

vanilla JS / AJAX调用加载gif /输出有时会延迟

1 个答案: