In Bezug auf Bild laden vor voller Seite

Question

wahrscheinlich gab es Thema vorher, aber leider funktioniert meine Lösung immer noch nicht. Ich möchte erreichen, dass mein Bild vor der ganzen Seite geladen wird, weil ich gerade schwarzen Hintergrund ERST anstelle von Bild bekomme (Bild lädt nach). Könntest du mir dabei helfen?

Hier ist meine Lösung so weit (aber ich bekomme schwarzen Hintergrund zuerst anstelle von Bild).

Code:

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

Vielen Dank für Ihre Hilfe.

Answer 1

könnten Sie versuchen, die folgenden:

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