javascript - 关于整页之前的图像加载

Question

可能之前就有过主题，但不幸的是我的解决方案仍然不起作用。我希望实现我的图像在整页之前加载，因为现在我首先获得黑色背景而不是图像(图像在之后加载)。你能帮我吗？

这是到目前为止我的解决方案(但我首先得到黑色背景而不是图像)。

代码:

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