用Javascript预加载图片？没有jQuery [英] Preloading images in Javascript? Without jQuery
问题描述
论坛中有几个问题，但我无法得到我需要的答案。
There are several questions about this in the forum, but I couldn't get a good answer for what I need.
我进入Canvas和Javascript，并且我想在游戏打开后立即预加载一些图像。我做了一个我想要构建的方法的例子（并且没有用）
I am getting into Canvas and Javascript, and I want to preload some images as soon as the game opens. I made an example of the method I wanted to build (and didn't work)
我有3个文件：
main.html其中画布（在这个例子中只有一个）被声明，我尝试加载一个图像，ImagePreloader.js，我预加载所有图像和Variables.js，我有我的变量。
I have 3 files: "main.html" where the canvas (there is only one in this example) is declared and I try to load an image, "ImagePreloader.js" where I preload all the images and "Variables.js" where I have my variables.
任何人都可以请这个图像预加载metod，或建议我一个可行的吗？我认为图片没有加载，因为我没有使用onLoad（）函数，我在目前为止阅读的教程中无法理解（我知道如何将它应用于图像，但不能应用于图像数组）
Could anyone please help me with this image preloading metod, or suggest me a viable one? I think the image is not loading because I am not using an onLoad() function, which I couldn't understand in the tutorials I read so far (I know how to apply it to an image, but not to an array of images)
main.html：
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
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
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();
提前致谢！
推荐答案
嗯，你会想要使用一个在某一点加载图像的函数，所以你不妨尝试理解onLoad。这并不难理解。
Well, you will want to use a function which loads the images at a certain point, so you might as well try to understand onLoad. It's not that hard to grasp.
onload是一个javascript事件，在加载某事后立即发生。换句话说： onLoad 就像一个javascript本机函数，当某些东西被加载时触发。 某些可以是一个窗口（例如：window.onload）或文档。你想要的是文件onLoad事件，因为它在你的文档被加载时触发。
"onload" is a javascript event that occurs immediately after something is loaded. In other words: onLoad is like a javascript-native function which triggers when something is loaded. That something can be a window (eg: window.onload) or a document. What you want is the document onLoad event, as it triggers when your document is loaded.
让我们为你提供一个简单的例子......
Let's provide you with a simple example...
<body onload="preloadMyImages();">
这告诉浏览器当你加载文档时，运行 preloadMyImages function。
This tells the browser "when you've loaded the document, run the preloadMyImages function".
然后您只需使用该功能将图像加载到客户端的浏览器缓存中。
All you have to do is then use that function to load your images into the client's browser cache.
function preloadMyImages()
{
var imageList = [
"image.gif",
"example/image.jpg",
"whatever/image.png"
];
for(var i = 0; i < imageList.length; i++ )
{
var imageObject = new Image();
imageObject.src = imageList[i];
}
}
实际上包装它并为您提供一个完整的工作实例。享受！
That practically wraps it up and provides you with a fully working example. Enjoy!
编辑
因为 - 根据您的评论 - 您正在寻找为了获得更多帮助，我想指出 https://stackoverflow.com/a/1038381/2432317 （作为众多例子中的一个）展示了你如何（也可能应该 - 取决于你计划在画布上绘制的内容）也使用img.onload。
Since - according to your comment - you are looking for some more help, I would like to point you to https://stackoverflow.com/a/1038381/2432317 which (as one of many examples) shows how that you can (and probably should - depending on what you're planning do draw on your canvas) use img.onload too.
然而，正如我在评论中所述：它将取决于你想要把它带到哪里。您越是深入研究Javascript编码，您就越能理解正在发生的事情。有几本好的（部分免费）书籍解释了如何编写Javascript代码，使用HTML5画布，创建预加载器，动画，讨论范围等。
Yet, as I stated in my comment: it will all depend on where you want to take it. The more you dive into Javascript coding, the more you will understand what's going on. There are several good (partly free) books out there explaining how to code Javascript, use the HTML5 canvas, create preloaders, animations, talk about scopes etc.
快速检查在大G的搜索引擎中也会提供大量的示例和教程，这对您有所帮助。其中一个例子：如何在HTML5画布上绘制图像你在一个简短而清晰的教程中预加载和循环动画。
A quick check at the big G of search engines turns up ample examples and tutorials too which will be helpfull for you. One of many examples: "How To Draw Images Onto Your HTML5 Canvas" which shows you preloading and looping an animation in a short and crisp tutorial.
但请不要指望我们为你编写所有代码 - 它不会发生。这是一个不那么罕见的情况，边做边学实际上会让你更聪明。如果您在前往最终目标的路上遇到其他问题，可以随时发布与该新问题相关的新问题。
But please, don't expect us to code it all for you - it's not going to happen. This is one of the not-so-rare cases where "learning by doing" will actually make you smarter. And if you hit another problem on your way to your final goal, you can always post a new question related to that new problem.
这篇关于用Javascript预加载图片？没有jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
