onkeypress事件changeImage

我有这个preloadimages功能：onkeypress事件changeImage

<script type="text/javascript"> 
function preloadimages(arr){ 
var newimages=[], loadedimages=0 
var postaction=function(){} 
var arr=(typeof arr!="object")? [arr] : arr 
function imageloadpost(){ 
    loadedimages++ 
    if (loadedimages==arr.length){ 
     postaction(newimages) 
    } 
} 
for (var i=0; i<arr.length; i++){ 
    newimages[i]=new Image() 
    newimages[i].src=arr[i] 
    newimages[i].onload=function(){ 
     imageloadpost() 
    } 
    newimages[i].onerror=function(){ 
     imageloadpost() 
    } 
} 
return { //return blank object with done() method 
    done:function(f){ 
     postaction=f || postaction 
    } 
} 
} 

preloadimages(['images/image1.jpg','images/image2.jpg','images/image3.jpg']).done(function(images){ 

}) 
</script>

这是changeIm功能：

<script type="text/javascript"> 
function changeIm(event){ 
var code; 

if(window.event){ 
code = event.keyCode; 
} 

else{ 
code = event.which; 
} 

if (code == 49 || code == 97) { 
document.getElementById('imageChange').src='image1.jpg'; 
} 
else if (code == 50 || code == 98) { 
document.getElementById('imageChange').src='image2.jpg'; 
} 
else { 
document.getElementById('imageChange').src='image3.jpg'; 
} 
} 
</script>

<body> 
<form method="post"> 
<input size="30" type="text" onkeypress="return changeIm(event)" /> 
</form> 

<img src="images/defaultImage.jpg" id="imageChange" alt="Image" /> 
</body>

为什么不起作用？我也试过：

document.getElementById('imageChange').images[0].src="image1.jpg"; 
document.getElementById('imageChange').images[0];

这是工作只有一个，但我改变的东西，我现在不记得了。我使用此功能从onkeypress事件的键盘更改图像。任何建议？

来源

2012-02-25 billaki

preloadimages(['images/image1.jpg','images/image2.jpg','images/image3.jpg']

根据您的preloadimages方法，图像所在的目录内images/
然而，在你的changeIm方法，你这样做是：

document.getElementById('imageChange').src = 'image3.jpg'; // (missing directory) 
// Solution: prefix your URLs with "images/": 
document.getElementById('imageChange').src = 'images/image3.jpg';

虽然我们在这，使用jQuery来轻松实现跨浏览器事件处理方法：

function changeIm(event) { 
    var code = event.which 
     , image 
     , directory = 'images/'; 

    if (code == 49 || code == 97) { 
     image = 'image1.jpg'; 
    } else if (code == 50 || code == 98) { 
     iamge = 'image2.jpg'; 
    } else { 
     image = 'image3.jpg'; 
    } 
    $('#imageChange').attr('src', directory + image); 
} 
$('#changeImgInput').keypress(changeIm); 

<input size="30" type="text" id="changeImgInput" />

来源

2012-02-25 18:22:23

您有权这样做，但我想从预加载功能中取出图像，而不是从服务器中取出图像。这就是为什么我只使用图像的名称。如果我在changeIm函数中使用根目录，我不需要预加载函数。 – billaki 2012-02-25 18:27:56

@ f1delak1浏览器应正确缓存图像。如果您在文档中加载相同的图像10x，则浏览器只能请求该文件一次（除非您的标题另有说明）。 – 2012-02-25 18:31:37

因为我不理解很多。如果我使用图像的根路径，它使用或不使用预载功能？ – billaki 2012-02-25 18:57:30

难道你不是只要你d以“images /”为前缀变化的图像，例如。

document.getElementById('imageChange').src='images/image2.jpg';

来源

2012-02-25 18:24:01

onkeypress事件changeImage

回答

相关问题