Как узнать загрузил ли браузер картинку?

Lazar · June 4, 2007

Есть скрипт,который тупо просматривает фотки,изменяя атрибут src тега img.Надо сделать так чтобы мне не надо было указывать количество фотографий в папке и запускать цикл,а чтобы он сам определил есть ли фотография по данной ссылке,и в случае значения true загружал е???и соответственно изменял значения атрибута

PacMan · June 4, 2007

никак. JS не может узнать о наличии/отсутствии файла не попробовав загрузить его. Работы с файловой системой в нем нет и никогда не будет.

Lazar · June 4, 2007

Пасиб... )У меня тут возникла ещ? одна проблемка IE почему-то не хочет выполнять функцию-

<script>
function winOpen(){
myBars='directories=no,location=no,menubar=no,titlebar=no,status=no';
var myOption='scrollbars=yes,resizable=yes,width=1024';
myFeatures=myBars+','+myOption;
newWin=open('','myPhoto',myFeatures);
mySrc='photo/block0/1.jpg';
newWin.document.writeln('<body bgcolor="black"><div align="center"><img src='+mySrc+'></div></body>')
}
</script>

<img src='photo/block1/1.jpg' id='myImg' width="200" alt='' onclick='winOpen()'>

Оперой и мазилой делает

Lazar · June 4, 2007

Вот полный код

<!DOCTYPE html PUBLIC >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>myPhotoLab</title>
</head>
<script language="javascript" type="text/javascript">
// JavaScript Document

<!--

/////////////////////////////////////////////////////////////////////////////////////////////

p=0;
myFolder=new Array(); /*создание массива где хранятся фотки*/


/////////////////Указываю количество фотографий в папке///////////////////////////////////////////////
myFolder[p]=new Array('8'); 
myFolder[(p=p+1)]=new Array('9');
myFolder[(p=p+1)]=new Array('2');
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
for(t=0;t<=p;t++){
 for(l=1;l<=myFolder[t][0];l++){
 myFolder[t][l]=new Image();
 myFolder[t][l].src='photo/block'+t+'/'+l+'_resize.jpg'; /*Гружу картинки в кэш*/
 }
}
////////////////////////////////////////////////////////////////////////////////////////////////////////


 /*Начальное значение*/
 numb=0;
 i=1; 
/*Выбор папки(блока)*/
function changeBlock(sel){
i=1; /*Обнуление значения сч?тчика*/
numb=sel.options[sel.selectedIndex].value; /*Номер выбранной папки*/
document.getElementById('myImg').src=myFolder[numb][i].src;
}

function nextPhoto(){
 if(i<myFolder[numb][0]){
 i=i+1;
 document.getElementById('myImg').src=myFolder[numb][i].src;
 }
}

function lastPhoto(){
 if(i>1){
 i=i-1;
 document.getElementById('myImg').src=myFolder[numb][i].src;
 }
}
/*Открывает окно с фотографией*/

function winOpen(){

myBars='directories=no,location=no,menubar=no,titlebar=no,status=no';
var myOption='scrollbars=yes,resizable=yes,width=1024';

myFeatures=myBars+','+myOption;
newWin=open('','myPhoto',myFeatures);
mySrc='photo/block'+numb+'/'+i+'.jpg';
newWin.document.writeln('<body bgcolor="black"><div align="center"><img src='+mySrc+'></div></body>')
}

//-->

</script>


<body bgcolor='#66FFFF'>

<table align='left'>
<td width='100%' height='100%' bgcolor="#FF0000">
<select onchange='changeBlock(this)' size='4'>
<option value=0>блок 1</option>
<option value=1>блок 2</option>
<option value=2>блок 3</option>
</select>
</td>
</table>

<table align='center'>
<!-- Кнопки управления -->
<td width='100%' height='100%'>



<div align='center'>
<button onclick='i=2;lastPhoto()'> << </button>
 
<button onclick='lastPhoto()'> < </button>
 
<button onclick='nextPhoto()'> > </button>
 
<button onclick='i=myFolder[numb][0]-1;nextPhoto()'> >> </button>



</div>

<!-- Вывод изображения -->

<img src='photo/block0/1_resize.jpg' id='myImg' width="200" alt='нажмите левой клавишей мыши на фото для увеличения' onclick='winOpen()'>
</td>
</table>


</table>




</body>
</html>

скриптег просматривает фотки.Сперва я их гружу в кэш.На экране отображаются тока картинки с ниским разрешением _resize.. при нажатии на не? открывается окошко newWin,туда грузит картинку более высокого качества.

Tokolist · June 4, 2007

никак. JS не может узнать о наличии/отсутствии файла не попробовав загрузить его. Работы с файловой системой в нем нет и никогда не будет.

Ну почему же нельзя? Если сделать HEAD-запрос, то можно. Вот создал скрипт:

<html>
<head>
</head>
<body>
<script type="text/javascript">

var req;

processReqChange = function() {
 if (req.readyState == 4) {
 //window.alert(req.status);
 switch (req.status) {
 case 200: window.alert("файл существует"); break;
 case 404: window.alert("файл НЕ существует"); break;
 default: window.alert("другая ошибка");
 }
 }
}

checkFileExists = function(url) {
 if (window.XMLHttpRequest) {
 req = new XMLHttpRequest();
 req.onreadystatechange = processReqChange;
 req.open("HEAD", url, true);
 req.send(null);
 } else if (window.ActiveXObject) {
 req = new ActiveXObject("Microsoft.XMLHTTP");
 if (req) {
 req.onreadystatechange = processReqChange;
 req.open("HEAD", url, true);
 req.send();
 }
 }


}

</script>

 <button onClick="checkFileExists('image.gif')">Проверить</button>

</body>
</html>

Проверял в ИЕ 6, Опера 9.2, ФФ 2.

Почемуто если проверять на локалхосте Опера и ФФ глючат (с ИЕ все нормально). Если же выкачать на сервер вроде везде нормально работает.

Будет работать конечно только в пределах текущего домена.

Тут также следует учесть что подобные запросы могут кэшироваться (хотя не уверен), но думаю способы обхода кэширования всем известны.

PacMan · June 5, 2007

Так то все неплохо, но если ответ 200, то файл закачивается.

А надо без закачки.

Tokolist · June 5, 2007

Так то все неплохо, но если ответ 200, то файл закачивается.
А надо без закачки.

Ну что Вы, я же сказал используем HEAD-запрос, то есть сервер передает только заголовок ответа, без тела, соответственно будут загружены только несколько десятков байт.

http://www.codenet.ru/webmast/http/httprqst.php#HEAD

Кроме того проверяя те же заголовки мы можем узнать еще такую полезную информацию, как тип файла, размер, дата модификации и т.п.

Lazar · June 6, 2007

!!Спасибо!! :cool:

за то что развязал руки ))

PacMan · June 6, 2007

Ну что Вы, я же сказал используем HEAD-запрос, то есть сервер передает только заголовок ответа, без тела, соответственно будут загружены только несколько десятков байт.
http://www.codenet.ru/webmast/http/httprqst.php#HEAD
Кроме того проверяя те же заголовки мы можем узнать еще такую полезную информацию, как тип файла, размер, дата модификации и т.п.

Это я понимаю, но

Тестил в фоксе. Firebug показал что картинка была загружена... Вот такие пироги.

Tokolist · June 6, 2007

ну можно проверить в реальных условиях...

закачать на сервер большую картинку... (5 мб например)

и протестировать... (желательно на диалапе :lol: )

у меня, к сожалению, сейчас нет такой возможности...

Sign In

Как узнать загрузил ли браузер картинку?

Question

Lazar

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

PacMan

Link to comment

Share on other sites

Lazar

Link to comment

Share on other sites

Lazar

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

PacMan

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Lazar

Link to comment

Share on other sites

PacMan

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Обсуждения

Forums

Important Information