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

@ f1delak1 Браузер должен правильно кэшировать изображения. Если вы загружаете одно и то же изображение 10x в свой документ, браузер должен запрашивать файл только один раз (если ваши заголовки не говорят иначе). –

Потому что я не очень понимаю. Функция предварительной загрузки используется или нет, если я использую корневой путь изображения? – billaki

Не делайте разницу d для префикса измененных изображений с помощью «images /», например.

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

источник

2012-02-25 18:24:01

OnKeyPress changeImage

ответ

Смежные вопросы