Как изменить атрибут, когда только при загрузке изображения?

Question

var light ="http://www2.breakpoint.com.eg/site-content/themes/break/images/webdesign/webdesign_thumb3a.jpg";

    $('#lightbox').animate({
    top: '0px'
  }, 1000, function() {
    $("img#portimg").attr({
         src: 'images/loading.gif',
         style: 'margin-top:200px; width:31px; height:31px'
});

$("img#portimg").attr({
         src: light,
         style: 'margin-top:10px; width:620px; height:550px'
});

Используя приведенный выше код, я показываю загрузочное изображение, которое исчезает при загрузке второго изображения.

Я пытаюсь изменить стиль, только когда второе изображениезагружается, потому что происходит то, что загружаемое изображение появляется, но jquery игнорирует первый стиль и показывает изображение со вторым стилем.

есть идеи?

Answer 1

Хорошо, теперь, когда я лучше понимаю, что вы пытаетесь сделать.

Создайте другое изображение (его не нужно вставлять в DOM). Установите обработчик загрузки для этого изображения, чтобы вы знали, когда оно загружено. Установите SRC для этого изображения на свет. Когда это изображение загружено, вызовите свой код, чтобы изменить атрибуты на «img # portimg». Поскольку светлое изображение теперь находится в кэше памяти браузера, оно будет отображаться немедленно. Между тем, ваше изображение загрузки отображалось бы все время, пока загружалось светлое изображение.

Если вы хотите сделать это менее сложным способом, просто предварительно загрузите светлое изображение в последовательности запуска, чтобы вам не пришлось ждать его с помощью:

var myLightImage = new Image(light);   // create Image object in global variable

Тогда он будет доступен мгновенно в любое время, когда вам это нужно, без ожидания.

Answer 2

пытались ли вы использовать обработчик .load().Т.е. что-то вроде

$("img#portimg").attr({
         src: 'images/loading.gif',
         style: 'margin-top:200px; width:31px; height:31px'
}).load(function(){...set your styles...});