Javascript Girl
  1. Javascript Girl
  3. Est-il nécessaire de configurer la fonction onload avant de définir src pour un objet image?
Intereting Posts
Comment désactiver l'événement de clic en utilisant Knockout? Utilisez JavaScript pour convertir une chaîne de date avec une fuseau horaire en un objet de date à l'heure locale InnerText vs innerHtml vs label vs text vs textContent vs outerText Où je place la déclaration sql dans la base de données pour blueimp / jQuery-File-Upload? Comment sélectionner le prochain nombre spécifique d'éléments en boucle par chaque clic en javascript pur? Texte vertical dans les en-têtes de table à l'aide d'une bibliothèque SVG basée sur JavaScript Ajouter CSS à <head> avec JavaScript? Activer les propriétés du parent avec une boucle de Guidons Événement de changement d'URL – JavaScript Latitude, Longitude Grabber Comment calculer le temps moyen Comment cacher les détails dans jquery ajax à partir de la source de la page du navigateur Mettre à jour une partie d'une page dans jade? Comment modifier le menu déroulant du menu déroulant selectize.js? Pourquoi le décorateur '@ input' préféré sur `: `

Est-il nécessaire de configurer la fonction onload avant de définir src pour un objet image?

On m'a dit qu'il était nécessaire de régler la fonction de onload avant de définir src pour un objet d'image. J'ai cherché SO pour cela.

J'ai trouvé ce code: 

 var img = new Image(); img.src = 'image.jpg'; img.onload = function () { document.body.appendChild(img); };

Mais la plupart des gens croient que la onload devrait être écrite avant src comme ceci: 

 var img = new Image(); img.onload = function () { document.body.appendChild(img); }; img.src = 'image.jpg';

DOIT- il être écrit dans cet ordre? Y a-t-il des cas où le code ci-dessus entraînera une erreur (comme si une image est trop grande)?

Si vous pouvez me montrer quelques exemples, je serai très apprécié.

C'est mon expérience que vous DEVEZ configurer en charge en premier (je suis la personne qui dit OP sur ce problème) – en particulier dans IE

Si vous rencontrez des problèmes concernant l'image mise en cache sans tirer, ajoutez +"?"+new Date().getTime() lorsque vous définissez la src la prochaine fois pour éviter le cache.

Voici l'exemple de MDN qui utilise également l'ordre que j'ai suggéré

Création d'une image à partir de zéro

Une autre image de lien SO.on ne déclenche pas deux fois dans IE7

Il ne faut pas, mais si vous définissez le src et que l'image est chargée avant que votre gestionnaire ne soit attaché, il ne déclenchera pas.

JavaScript fonctionne de manière asynchrone. Le réglage de la src entraînera le navigateur Web à charger l'image en dehors du flux d'exécution principal. Si la charge n'est pas réglée au moment où l'opération est terminée, ce qui pourrait être entre le paramètre src et la onload .

Le navigateur commencera à télécharger l'image de façon asynchrone dès que vous affectez un src, il est donc possible que le téléchargement puisse être complété avant d'attacher le gestionnaire d'événements onload et ne jamais déclencher le code pour ajouter l'image au DOM.

La plupart des navigateurs déclenchent l'événement de chargement immédiatement si l'image si l'image est mise en cache. Cependant, Internet Explorer 7 ne le déclenche pas du tout. C'est pourquoi il est préférable de définir le src en premier.