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

Question

好的，我正在使用AJAX接收JSON数据，其中包含有关接下来应该发生的信息...基本上，我使用css类的hide / show来进行隐藏/显示，我从图像/包装器和加载的.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);