Coo*_*Guy 4 javascript image preload
在论坛中有几个问题,但我无法得到我需要的好答案.
我正在进入Canvas和Javascript,我想在游戏打开后立即预加载一些图像.我做了一个我想要构建的方法的例子(并没有工作)
我有3个文件:"main.html",其中画布(在这个例子中只有一个)被声明,我尝试加载图像,"ImagePreloader.js"我预加载所有图像和"Variables.js"在哪里我有我的变数.
任何人都可以请这个图像预加载metod,或建议我一个可行的？我认为图像没有加载,因为我没有使用onLoad()函数,我在目前为止阅读的教程中无法理解(我知道如何将其应用于图像,但不是图像数组)
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();
提前致谢!
好吧,你会想要使用一个在某个点加载图像的函数,所以你也可以尝试理解onLoad.这并不难理解.
"onload"是在加载某些内容后立即发生的javascript事件.换句话说:onLoad就像一个javascript-native函数,在加载某些东西时触发.那东西可以是一个窗口(例如:window.onload)或文档.您想要的是文档onLoad事件,因为它在加载文档时触发.
让我们为您提供一个简单的例子......
<body onload="preloadMyImages();">
这告诉浏览器"当你加载文档时,运行preloadMyImages函数".
您所要做的就是使用该功能将图像加载到客户端的浏览器缓存中.
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];
}
}
这实际上包装了它并为您提供了一个完整的例子.请享用!
编辑
因为 - 根据您的评论 - 您正在寻找更多帮助,我想指向/sf/answers/72686701/,其中(作为众多示例中的一个)展示了您可以如何(和可能应该 - 取决于你计划在画布上绘制的内容)也使用img.onload.
然而,正如我在评论中所述:它将取决于你想要把它带到哪里.您越是深入研究Javascript编码,您就越能理解正在发生的事情.有几本好的(部分免费)书籍解释了如何编写Javascript代码,使用HTML5画布,创建预加载器,动画,讨论范围等.
快速检查大G的搜索引擎会提供大量的示例和教程,这对您有所帮助.许多例子中的一个:" 如何在HTML5画布上绘制图像 ",它显示了在简短而清晰的教程中预加载和循环动画.
但请不要指望我们为您编写所有代码 - 它不会发生.这是一个不那么罕见的案例,"边做边学"实际上会让你更聪明.如果您在前往最终目标的路上遇到其他问题,则可以随时发布与该新问题相关的新问题.