J'essaie de charger une image dans JavaScript:
loadImage(src, img) {
return new Promise((resolve, reject) => {
var tmp = new Image();
tmp.onload = resolve;
tmp.onerror = reject;
tmp.src = src;
img.src = src;
});
}
3 Réponses :
Si je vous comprends correctement, vous voulez rendre l'image une fois que cela a fait le chargement? Peut-être simplement créer l'image dans la fonction "LoadImage", puis dans le "Onload" faire l'adéquation approprié. Voici un exemple de ce que je pensais:
Eh bien, malheureusement, ce n'est pas si facile. L'image ne fait qu'une partie d'une structure HTML, une boîte de lumière. Cette structure est créée via JavaScript. Je veux seulement ajouter la structure dans le DOM une fois que l'image est chargée. Je ne peux pas utiliser votre méthode car elle crée un nouvel élément d'image. J'ai besoin d'utiliser l'élément qui est déjà là. Sinon, ce serait facile: D
@AndreasRemdt Je suis confus - Vous ne voulez pas ajouter l'image au DOM avant son charge, mais vous avez déjà une image dans le DOM que vous devez réutiliser? Sauf si je me trompe, vous pouvez simplement Remplacer l'image précédente à l'aide de cette méthode, mais vous supprimez l'ancienne image et appendez le nouveau dans l'événement ONLOWLOW.
@Vlaz Imagine ceci: var modèle = '
'; . L'image ne fait pas encore partie du DOM, cela fait partie de mon javascript. Il devrait être dans le DOM une fois qu'il a été chargé.
Vous ne savez pas ce qui ne va pas avec votre deuxième approche et pourquoi vous pensez que c'est buggy. Je peux l'imaginer à charger deux fois si l'image n'est pas encore dans le cache: si vous déclenchez le chargement de deux images en même temps, le navigateur ne peut pas connaître les paramètres de mise en cache de l'URL et devrait le charger pour les deux éléments séparément. Mais si vous les chargez de la séquence, le second doit tirer du cache et ne pas faire une demande séparée, sauf si votre serveur est en train d'être bizarre et que vous servez des en-têtes qui interdisent la mise en cache.
p>
<image id="foo">
Intéressant! J'ai désactivé mon cache dans DevTools depuis que je voulais tester des liens lents par l'étranglement. Même en utilisant votre méthode, les images sont extraites deux fois dans le réseau. Le cache handicapé pourrait-il être le problème alors?
Si vous désactivez le cache, alors évidemment, la deuxième image ne pourra pas être trouvée dessus :) Le seul moyen de le faire avec le cache désactivé serait d'Ajax / récupération de la source d'image et de la transformer en URL de données comme Ce , puis utilisez l'URL de données pour img.src ; De cette façon, vous contrôlez le trafic explicitement; Ensuite, vous êtes soumis aux restrictions XSS et vous sentez Icky. Faites-vous une faveur et un test avec une configuration de serveur appropriée pour vous assurer que la mise en cache d'image existe pour une raison. :RÉ
Eh bien, aujourd'hui j'ai appris quelque chose de nouveau. J'utiliserai DELAY.ME pour simuler la latence de réseau et laisser le cache sur: D Merci beaucoup!
Je pense que votre hypothèse est fausse. L'image est chargée sans qu'il soit nécessaire d'être attachée au DOM.
J'ai modifié votre fonction légèrement de sorte qu'il résout la balise d'image au lieu de l'événement de chargement et il semble fonctionner correctement: Je le teste comme ça : le J'espère que cela aide. Fiddle:
https://jsfiddle.net/f4hratje/5/ DELAY.ME ajoute un délai artificiel au chargement de l'image, vous pouvez donc voir que l'image est en réalité chargée et, En utilisant la promesse, attachée au DOM uniquement après avoir été chargée.
Merci, je pense que je l'ai compris, semblait être un problème avec le cache. Ce service DELAY.ME est également très pratique, je vais l'utiliser à partir de maintenant pour simuler la latence de réseau.
Alors pourquoi ne définissez-vous pas l'image directement?
tmp.src = src; img.src = src; qui ne va pas précharger ... Le réglage de IMG.SRC devrait être effectué dans l'appel surcharge.@EPASCARELLO Je pensais la même chose, mais dans mon devtools, je peux voir la source d'être récupérée deux fois. Je ne sais pas pourquoi ... En outre, je ne peux pas régler l'image directement, car cela fait partie d'une structure plus grande qui dépend de l'image chargée.