Je veux définir une image d'arrière-plan sur la balise body, puis exécuter du code - comme ceci:
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
Comment puis-je m'assurer que l'image d'arrière-plan est complètement chargée?
essaye ça:
$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
$(this).remove(); // prevent memory leaks as @benweet suggested
$('body').css('background-image', 'url(http://picture.de/image.png)');
});
cela créera une nouvelle image en mémoire et utilisera l'événement load pour détecter quand le fichier src est chargé.
J'ai un plugin jQuery appelé waitForImages
qui peut détecter le téléchargement des images d'arrière-plan.
$('body')
.css('background-image','url(http://picture.de/image.png)')
.waitForImages(function() {
alert('Background image done loading');
// This *does* work
}, $.noop, true);
Quelque chose comme ça:
var $div = $('div'),
bg = $div.css('background-image');
if (bg) {
var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
$img = $('<img>').attr('src', src).on('load', function() {
// do something, maybe:
$div.fadeIn();
});
}
});
Il n'y a pas de callback JS pour les actifs CSS.
Voici un petit plugin que j'ai créé pour vous permettre de faire exactement cela, il fonctionne également sur plusieurs images de fond et plusieurs éléments:
Lire l'article:
http://catmull.uk/code-lab/background-image-loaded/
ou allez directement au code du plugin:
http://catmull.uk/downloads/bg-loaded/bg-loaded.js
Il suffit donc d'inclure le plugin et de l'appeler ensuite sur l'élément:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded();
</script>
Évidemment, téléchargez le plugin et stockez-le sur votre propre hébergement.
Par défaut, il ajoute une classe "chargée par bg" à chaque élément mis en correspondance une fois que l'arrière-plan est chargé, mais vous pouvez facilement le modifier en lui transmettant une fonction différente, comme ceci:
<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
$('body').bgLoaded({
afterLoaded : function() {
alert('Background image done loading');
}
});
</script>
Voici un codepen le prouvant.
J'ai trouvé une solution qui fonctionnait mieux pour moi et qui présente l'avantage de pouvoir être utilisée avec plusieurs images (cas non illustré dans cet exemple).
De la réponse de @ adeneo sur cette question :
Si vous avez un élément avec une image de fond, comme ceci
<div id="test" style="background-image: url(link/to/image.png)"><div>
Vous pouvez attendre le chargement de l'arrière-plan en récupérant l'URL de l'image et l'utiliser pour un objet image en javascript avec un gestionnaire de chargement
var src = $('#test').css('background-image'); var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,''); var img = new Image(); img.onload = function() { alert('image loaded'); } img.src = url; if (img.complete) img.onload();
https://github.com/alexanderdickson/waitForImages
$('selector').waitForImages({
finished: function() {
// ...
},
each: function() {
// ...
},
waitForAll: true
});
J'ai fait un hack pur en javascript pour rendre cela possible.
<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>
Ou
onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";
css:
.image_error {
display: none;
}
solution JS pure qui va ajouter un préchargeur, définir l’image d’arrière-plan, puis le configurer pour la récupération de place ainsi que son écouteur d’événements :
const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
bgElement.classList.add("loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;
preloaderImg.addEventListener('load', (event) => {
bgElement.classList.remove("loading");
bgElement.classList.add("loaded");
bgElement.style.backgroundImage = `url(${imageUrl})`;
preloaderImg = null;
});
.loading {
opacity: 0;
transition: opacity .4s ease-out;
}
.loaded {
opacity: 1;
}