关于整页前的图像加载

Question

可能以前有过话题，但不幸的是我的解决方案仍然无效。我想实现我的图像将在整页之前加载，因为现在我得到黑色背景FIRST而不是图像（图像加载之后）。你能帮帮我吗？

这是我到目前为止的解决方案（但我得到黑色背景FIRST而不是图像）。

码：

<script>
// Preload big parallax image

function preloadImage() {


  return new Promise(function(resolve, reject) {
    var img = new Image();
    var img_url = 'assets/images/masthead.jpeg';
    img.src = img_url;
    resolve(img_url);
  });

}



$(document).ready(function(){
  preloadImage().then(function(fromResolve){
    $('.ui.inverted.segment.masthead').css('background-image', 'url(' + fromResolve + ')');
  });
});
</script>

谢谢您的帮助。

Answer 1

您可以尝试以下方法：

// Preload big parallax image

function preloadImage() {
  return new Promise(function(resolve, reject) {
    var img = new Image();
    var img_url = 'assets/images/masthead.jpeg';
    img.onload = function(x){resolve(img_url);};
    img.onerror = function(x){reject([err,img_url]);};
    img.src = img_url;
  });

}
preloadImage()//load the images first
.then(function(fromResolve){
  $(document).ready(//wait for document to be ready
    function(){
      $('.ui.inverted.segment.masthead').css('background-image', 'url(' + fromResolve + ')');      
    }
  )
})
.catch(//if something went wrong
  function(info){
    console.log("image load failed because:",info[0],"url:",info[1])
  }
);