用JavaScript预加载图像
[英]Preload Images in JavaScript
问题描述
I'm working on a little game where you press a button and a new image appears. 
我正在做一个小游戏，您按一下按钮就会出现一个新图像。 There's a glitch every time you ask a new image to display and it occurred to me that I should preload the necessary images. 每次您要显示一个新图像时都会出现故障，我想到我应该预加载必要的图像。 However, I'm not sure how to do this efficiently as I'm not using a variable to display the images. 但是，我不确定如何有效地执行此操作，因为我没有使用变量来显示图像。 This is what I'm working on. 这就是我正在努力的。 Any suggestions? 有什么建议么？
HTML: HTML：
<body onLoad="setup()">
<div id="wrapper">
<div id="jajo"></div><!--this is where jajo will be displayed-->
<div id="directions"></div><!--directions for how to interact with jajo-->
</div><!--wrapper-->
</body>
JavaScript: JavaScript的：
// Calls the loadJajo function and passes the image URL
// Initiates directionSlide function
function setup() {
loadJajo('jajo.png');
elem = document.getElementById('directions');
directionSlide();
}
//Creates a new image object (Jajo) and writes it to the page.
function loadJajo(jajoSRC) {
var main = document.getElementById('jajo'); // Creates an variable to represent the "main" division
var defaultJajo = document.createElement('img'); // Creates a new image object (default Jajo image)
defaultJajo.src = jajoSRC; // adds the source file name to the defaultJajo image object
main.appendChild(defaultJajo); //puts the defaultJajo object inside the "main" division
}
// Listen for key pressed events.
document.onkeydown = function(event) {
var keyPress = String.fromCharCode(event.keyCode); // Assigns value of key pressed to variable.
if(keyPress == "W") { // If 'W' is pressed, display Jajo waving.
document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_wave.png'>";
document.onkeyup = function(event) { // If 'W' is released, display default Jajo.
document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
}
} else if(keyPress == "A") { // If 'A' is pressed, display Jajo winking.
document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_wink.png'>";
document.onkeyup = function(event) { // If 'A' is released, display default Jajo.
document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
}
} else if(keyPress == "S") { // If 'S' is pressed, display transparent Jajo.
document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_invisible.png'>";
document.onkeyup = function(event) { // If 'S' is released, display default Jajo.
document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
}
} else if(keyPress == "D") { // If 'D' is pressed, display purple Jajo.
document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_purple.png'>";
document.onkeyup = function(event) { // If 'D' is released, display default Jajo.
document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
}
} else if(keyPress == "E") { // If 'E' is pressed, display Jajo eating a carrot.
document.getElementById("jajo").innerHTML= "<img alt='car' src='jajo_carrot.png'>";
document.onkeyup = function(event) { // If 'E' is released, display default Jajo.
document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
}
}
}
var elem;
var i = 0; // Counter variable.
// Array with directions for interacting with Jajo.
var directionArray = ["This is Jajo, your new pet monster!",
"Jajo wants to say 'Hi!'<br>Press and hold 'W'",
"Jajo has some special skills.<br>Press and hold 'D' to see one!",
"Jajo is hungry for a healthy snack.<br>Press and hold 'E'",
"Jajo wants to show you his secret power.<br>Press and hold 'S'",
"That secret is just between you and Jajo!<br>Press and hold 'A'"];
// Transitions one direction to the next.
function nextDirection() {
i++; // Continuously add 1 to i.
elem.style.opacity = 0; // Directions opacity at 0%.
if(i > (directionArray.length - 1)) { // Resets counter to 0 when it reaches the end of the array.
i = 0;
}
setTimeout(directionSlide,1000); // Set time delay for transition between directions.
}
// Displays direction one at a time.
// http://www.developphp.com/view.php?tid=1380
function directionSlide() {
elem.innerHTML = directionArray[i]; // Displays direction based on position of counter variable.
elem.style.opacity = 1; // Direction opacity at 100%.
setTimeout(nextDirection,5000); // Set time delay for display of directions.
}
2 个解决方案
解决方案1
1 2014-03-23 22:06:40
Preloading Images with JavaScript 使用JavaScript预加载图像
Place the image paths within an array, and iterate over that array: 将图像路径放置在数组中，并在该数组上进行迭代：
(function () {
// All image paths go in this array
var images = [ "jajo_wave.png", "jajo_wink.png" ];
// Cycle over the array, pre-loading each image
for ( var i = 0; i < images.length; i++ ) {
// Create new image object
var image = document.createElement( "img" );
// For debugging, output successful preloading msg
image.onload = function () {
console.log( "Loaded: " + this.src );
}
// Set image source
image.src = images[ i ];
}
}());
But More Importantly... 但更重要的是...
As stated in the comment above , your code should be refactored quite a bit. 如上面的评论所述 ，您的代码应进行大量重构。 Please do take advantage of a codereview over at https://codereview.stackexchange.com/ . 请通过https://codereview.stackexchange.com/充分利用codereview。
One very prominent issue you'll want to address is the constant trips back and forth to the DOM looking up the same element. 您要解决的一个非常突出的问题是，不断往返于DOM并查找相同的元素。 Store references to your element(s) so you don't need to run around looking for them all the time. 存储对元素的引用，因此您无需一直四处寻找它们。
解决方案2
0 2017-09-08 17:13:39
I've answered a similar question there: 我在那里回答了类似的问题：
https://stackoverflow.com/a/46121439/1951947 https://stackoverflow.com/a/46121439/1951947
In your case it would be: 您的情况是：
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
and then you can use your image anywhere you like and it would be already cached (preloaded) 然后您可以在任意位置使用图片，并且该图片已经被缓存（预加载）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.