загрузка изображений
 

Хочу сделать что бы изображение после загрузки появлялось плавно.
Пробовал так:

$(function(){
  $('#unit_image').fadeIn(1000)
});

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

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

$(document).ready(function(){
   ...
});

А если так?

$(function(){
    $('#unit_image').hide().load(function(){
        $(this).fadeIn(1000);
    });
});

$(document).ready(function()

$(function()

Разве это не одно и то же?


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

$('#unit_image').hide().load(function()

До того как срабатывает метод hide() браузер успевал показать часть картинки. Метод load почему то не срабатывал, если картинка уже есть в кэше (сейчас, не помню в каком браузере).

Проблему решил следующим образом:
1. У картинки изначально указывал другой src (белый фон)
2. Нужное изображение подгружал с помощью new Image

unitImg = new Image
unitImg.src = '/<?= $imgFullLink ?>'

3. Отображение картинки привязал c помощью load, предварительно проверяя, что она уже не закружена if(unitImg.complete)

Немного криво, но работает, во всех браузерах