Загрузите div после загрузки изображения с помощью jquery

Question

При загрузке страницы мой слайдер изображений загружается за одну или две секунды, и сразу появляется теневое изображение под ним (очень маленький размер файла по сравнению с изображением слайдера). Вы можете увидеть это здесь: домашняя страница

Мне бы хотелось, чтобы заштрихованное изображение загружалось только после того, как изображение слайдера завершило загрузку. Было бы еще лучше применить эффект элегантного постепенного затухания после загрузки первого изображения слайдера.

Я не могу понять, как написать это в jquery. Любая помощь? Спасибо!

Answer 1

Вы можете использовать событие images onload.

При использовании jQuery это будет выглядеть как

$('#image_id').load(function() {
     $('#div_id').fadeIn('fast');
});

Если вы вставляете изображения динамически, вы можете просто поместить этов объект создателя:

$('<img>', {
    src:   '/myimages/foo.jpg',
    id:    'bar',
    load:  function() {
        $('#div_id').fadeIn('fast');
    }
}).appendTo(#somewhere);

Ссылка: .load ()
Пример: http://www.jsfiddle.net/4yUqL/20/

Answer 2

Вы можете сделать загрузку изображения.

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

$('#img').bind("load", function() {
    $('#theshadow').show();
});

Конечно, вам понадобится способ сделать это с помощью ползунка (в котором есть несколько изображений и другие функции). Но событие загрузки на изображении должно быть тем, что вы хотите.

См. это , это связано