バニラJS/AJAXコールロードGIF /出力が時々遅れる

Question

私はAJAXを使用して、次に何が起こるべきかに関する情報を含むJSONデータを受け取ります...基本的に私はCSSクラスhide/showを使用して、イメージ/ラッパーと読み込み.pngイメージ

でも、イメージの表示/非表示を追加/削除してから新しいイメージsrcを追加し、新しいイメージにcssクラスを追加/削除します。

表示/非表示のクラスが追加されたとき、私はこの順序でそれを行うとしてもカントー時にはそれはそれは私が150を入れしようとした次の画像SRC

に変わり秒前にまだ分割の古い写真です終了時のミリ秒遅れですが、それでもまだです

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);