Le préchargement des images en Javascript? Sans jQuery
Il y a plusieurs questions à ce sujet dans le forum, mais je ne pouvais pas obtenir une bonne réponse pour ce dont j'ai besoin.
Je suis en Canvas et Javascript, et je tiens à précharger les images dès que le jeu s'ouvre. J'ai fait un exemple de la méthode que j'ai voulu construire (et ne fonctionne pas)
J'ai 3 fichiers:
"main.html" là où la toile (il y a un seul dans cet exemple) est déclarée et j'essaie de charger une image, "ImagePreloader.js" là où je précharger toutes les images et les "Variables.js" où j'ai mes variables.
Quelqu'un pourrait-il m'aider avec cette image de préchargement metod, ou me suggérer une solution viable? Je pense que l'image ne se charge pas parce que je ne suis pas à l'aide d'un onLoad() fonction que je ne comprenais pas dans les tutoriels, j'ai lu jusqu'à présent (je sais pas comment l'appliquer à une image, mais pas à un tableau d'images)
main.html:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script type="text/javascript" src="Variables.js"></script>
<script type="text/javascript" src="ImagePreloader.js"></script>
<script>
//Basic canvas info
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//Draw one of the images. Somehow it doesn't work :(
context.drawImage(imageArray[3], x, y, width, height);
</script>
</body>
</html>
ImagePreloader.js
//This should preload the images in imageArray[i] with 0 <= i <= 5 ... right?
function preloader()
{
for(var i=0; i<5; i++)
{
imageArray[i].src=images[i];
}
}
Variables.js
//array of sources of my images
images = new Array();
images[0]="img1.jpg"
images[1]="img2.jpg"
images[2]="img3.jpg"
images[3]="img4.jpg"
images[4]="img5.jpg"
//Stuff to draw the image
var x = 50;
var y = 50;
var width = 256;
var height = 256;
//Is this actually an array of images?
imageArray = new Image();
Merci d'avance!
OriginalL'auteur CookieGuy | 2013-07-03
Vous devez vous connecter pour publier un commentaire.
Bien, vous voulez utiliser une fonction qui charge les images à un certain point, de sorte que vous pourriez aussi bien essayer de comprendre onLoad. Il n'est pas difficile à saisir.
"onload" est un code javascript événement qui se produit immédiatement après quelque chose est chargé. En d'autres termes: onLoad est comme un javascript natif de la fonction qui se déclenche lorsque quelque chose est chargé. Que quelque chose peut être une fenêtre (par exemple: fenêtre.onload) ou un document. Ce que vous voulez, c'est le document d'événement onLoad, comme il se déclenche lorsque votre document est chargé.
Nous allons vous fournir un exemple simple...
Cela indique au navigateur "lorsque vous avez chargé le document, exécutez la preloadMyImages fonction".
Tout ce que vous avez à faire est alors d'utiliser cette fonction pour charger vos images dans le navigateur du client en cache.
Que, pratiquement, l'enveloppe et vous fournit un travail entièrement exemple. Profitez-en!
MODIFIER
Depuis - en fonction de votre commentaire, et vous êtes à la recherche pour certains de plus d'aide, je voudrais vous https://stackoverflow.com/a/1038381/2432317 qui (en tant que l'un des nombreux exemples) qui montre comment vous pouvez (et sans doute devrait - selon ce que vous prévoyez faire de dessiner sur la toile) utilisation img.onload trop.
Encore, comme je l'ai dit dans mon commentaire: tout dépendra de l'endroit où vous voulez le prendre. Plus vous plongez dans le Javascript de codage, le plus vous aurez à comprendre ce qu'il se passe. Il y a plusieurs bonnes (partie libre) ouvrages expliquant comment code Javascript, utiliser le HTML5 canvas, créer précharge, des animations, de parler sur les étendues etc.
Une vérification rapide à la grande G de moteurs de recherche se tourne de nombreux exemples et des tutoriels qui seront utiles pour vous. L'un des nombreux exemples: "Comment Dessiner des Images Sur Votre HTML5 Canvas", qui vous montre la pose d'une boucle d'une animation dans un bref et concis tutoriel.
Mais s'il vous plaît, ne vous attendez pas de nous code pour vous - il ne va pas arriver. C'est l'un de la pas-si-les rares cas où "learning by doing" sera effectivement vous rendre plus intelligent. Et si vous frappez un autre problème sur votre chemin à votre objectif final, vous pouvez toujours poster une nouvelle question relative à ce nouveau problème.
Oui, vous avez raison. L'exemple montre que "onload" et comment l'utiliser pour un preloader qui fonctionne, qui est ce que vous avez demandé. Le reste de votre code dépend de l'endroit où vous voulez le prendre. Si vous avez besoin de variables dans un autre champ d'application, de définir et de les utiliser en conséquence. Esprit vous que personne ici ne sera code de votre site pour vous. Et si vous avez besoin d'apprendre au sujet de la portée dans le Javascript, je vous conseille de saisir l'un des plusieurs bonnes Javascript livres. Mais en regardant votre question: vous avez demandé comment code un travail de préchargement en JS et vous l'avez obtenu. Prenez maintenant que le code et les utiliser la force!
Ajout d'un MODIFIER pour vous donner un petit coup de main sur votre prochaine question.
Merci beaucoup, je voudrais ajouter un +1 ici, mais je n'ai pas assez de rep encore
Pas de soucis. Sachant que je pouvais aider quelqu'un est de "+1" assez pour moi. 😉
OriginalL'auteur e-sushi
Vous devez vous assurer que ces 5 images sont chargées (téléchargé ne marche pas alwaysmean son chargé et prêt à l'emploi, la seule onload garantit que l'image est prête à l'emploi) avant de l'utiliser.
Donc ajouter onload pour les images, puis de compter à partir de la fonction onload et de déclencher le tirage après 5 d'entre eux sont chargés
Aussi, sont que deux points de la fin de la boucle for et prefetchImages() est-il nécessaire?
Et désolé pour les multiples commentaires, mais imageArray n'est pas déclarée dans le code. Qui est le tableau des images?
Ok comme vous l'avez remarqué le code n'est pas propre, permettra de corriger plus tard aujourd'hui
OriginalL'auteur sabithpocker
essayer cette
J'ai fait cette prefetch pour un curseur avoir de nombreuses images.avant de curseur commence les deux premières images, j'ai préchargé à l'aide de ce et il fonctionne très bien pour moi.. je pense que cela fonctionnera pour toile aussi. U pouvez l'essayer..
OriginalL'auteur Shinov T