jQuery « Как проверить загрузилось ли изображение в объект?

Делаю это так:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

   var pic = new Image();
       pic.src = 'images/picture5.jpg' ;

       $(pic.src).load()
          {
               $('#element').append('<image id="image">');
               $('#image').attr('src', pic.src)
          }
 


Првельно ли я сделал?
И еще вопрос. Есть ли смысл после отображения изображения удалить свойство?
0
javascript jquery

1 ответов

Вы написали почти правильно.


var pic = new Image();    // создаем объект "изображение"
pic.src = 'images/picture5.jpg' ; // указываем источник изображения
$(pic).load(function() { // вешаем на наш объект анонимную функцию на событие LOAD при помощи jQuery
     $('#element').append(pic);
});
 

Возможно это сделать иначе - повесить без участия jQuery вообще:

pic.onLoad = function () {
    var el = document.getElementById('element');
    el.appendChild(pic);
}
 
3

Пока загружается img как установить другое фото, катори покажет что img эшо не загрузилась? например какойнебуд upload.

0

когда до делал галерею и тоже была задача, дождаться загрузки фотографии... сделал так:


var url = "images/mypicture.jpg";
$("#upload").html("<img class='imgloaded' src='"+url+"'>");
$(".imgloaded").bind("load",function(){
    // вызывается функция после полной загрузки картинки.
})
 
Предостерегу от "граблей"... изночально блок upload был невидимым, но туда почему то не грузилось фото... пришлось сделать его скрытым и 100% прозрачным. Помогло
0

А реально ли сделать под такую затею (как у меня) полноценный процентный прогрес-бар? Слышал что только на флэше можно.

0

Ну, а вы сами-то проверяли, работает ли ваш код? Там же ошибок немеряно.

Вообщем, не нужно проверять, загрузилось ли изображение в обьект или нет, просто делайте


var pic = new Image();
    pic.src = 'images/5.jpg';
    pic.width = '800';
    pic.height = '600';

$('#element').append('<image src="' + pic.src + '" width="' + pic.width + '" height="' + pic.height + '" alt="" />');
 а когда загрузится, тогда загрузится, это неважно.
-1