Загрузка фонового изображения с анимацией

Question

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

var valimg="image_1.jpg"; 
jQuery("#sw_pic").css("background-image",""+valimg); 
jQuery("#sw_pic").fadeIn(2000); 

проблема, к примеру, когда я запускаю это, он не создает эффекта замирания , также я попробовал jQuery's animate(), но с тем же результатом. Кажется, что работает только непрозрачность, но нет другого.

Как я могу использовать это или написать код, который работает окончательно и получить некоторый эффект при загрузке изображений в качестве фона?

С уважением и thank's за помощь

Answer 1

Попробуйте использовать .hide()

var valimg="image_1.jpg"; 
jQuery("#sw_pic").css("background-image",'url('+ valimg +')'); 
jQuery("#sw_pic").hide().fadeIn(2000); 

или вы можете взглянуть на https://stackoverflow.com/a/4631006/3385827

Answer 2

нагрузки Изображение медленного

Проблема Предположим, вы установили фоновое изображение в html, изображение загружается ленивым в первый раз В следующий раз он сможет работать с кешем браузера. вы пытаетесь загрузить изображение на элементы dom, когда будете готовы.

Главное в теге HTML загрузить изображение как этот

<img src="/path/image_1.jpg" style="display:none"/> 

ваш Jquery внутри в йот готовый

$(function() { 
    var valimg="image_1.jpg"; 
    jQuery("#sw_pic").css("background-image",""+valimg); 
    jQuery("#sw_pic").fadeIn(2000); 
});