jquery 加载回调 function 不同步工作

Question

Ok from looking previously I heard that I could use a callback function to make a jquery load function synchronous.

For context I'm trying to do a crossfading transition that is triggered from an onclick function. Basically I want to ensure that the content on bottom has loaded before the top starts going transparent but that doesn't always happen clearly, there is an image on them which quite clearly hasn't loaded by that time, is there a fix to ensure it waits?

Below is a simplified version of the code to show the issue. Help would be appreciated.

 if (onTop === true)  {
    onTop = false;
    $("#bottom").load(Location, function() {
        setTimeout(function() {
            if (onTop === false) {
                document.getElementById("bottom_container").style.zIndex = 0;
            }
        }, 800);
        document.getElementById("top_container").style.opacity = 0;

        document.getElementById("bottom_container").style.height = null;
        var bottomContainerHeight = document.getElementById("bottom_container").clientHeight;
        document.getElementById("top_container").style.height = (bottomContainerHeight) + "px";
        //Makes sure the top content is equal in height to the top content as to not overflow past it.
    });
  }
  else {
      onTop = true;
      $("#top").load(Location, function() {
          document.getElementById("bottom_container").style.zIndex = -2;
          document.getElementById("top_container").style.opacity = 1;

          document.getElementById("top_container").style.height = null;
          var topContainerHeight = document.getElementById("top_container").clientHeight;
          document.getElementById("bottom_container").style.height = (topContainerHeight) + "px";
          //Makes sure the bottom content is equal in height to the top content as to not overflow past it.
      });
  }

Answer 1

You could accomplish this using CSS animations and/or transitions.

The z-index doesn't matter in this case.

Since you'll be fading the elements in and out, it doesn't matter what layer they're on.

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.fade-in {
    animation: fade 500ms linear 0 1 normal forwards;
}
.fade-out {
    animation: fade 500ms linear 0 1 reverse forwards;
}

Then you can just toggle the classes for each to get the effect.

document.querySelector("#top").classList.add("fade-out");
document.querySelector("#top").classList.remove("fade-in");
document.querySelector("#bottom").classList.add("fade-in");
document.querySelector("#bottom").classList.add("fade-out");

The images themselves can be preloaded.