Подгрузка background картинок с эффектом fade in

2_k · February 28, 2010

Подскажите пожалуйста каким preload скриптом можно добиться эффекта fade in - плавного появления фоновых картинок после их полной подгрузки на страничке? Имеется сайт - портфолио, состоит из множества png и больших фоновых картинок, от этого сильно тяжёлый. При загрузке страницы с таким колличеством картинок они грузятся постепенно и не совсем красиво с эстетической точки зрения. как бы это поправить?

s0rr0w · February 28, 2010

Подскажите пожалуйста каким preload скриптом можно добиться эффекта fade in - плавного появления фоновых картинок после их полной подгрузки на страничке?

Собственноручно написанным.

2_k · February 28, 2010

Собственноручно написанным.

Забыли написать про стоимость часа работы.=)

Мне кажется существуют решения в жанре free license, если смотреть по аналогии с другими скриптами, кто то может искал подобное решение и нашёл.

s0rr0w · February 28, 2010

Забыли написать про стоимость часа работы.=)
Мне кажется существуют решения в жанре free license, если смотреть по аналогии с другими скриптами, кто то может искал подобное решение и нашёл.

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

Edited February 28, 2010 by s0rr0w

2_k · February 28, 2010

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

Смотря какие задачи преследуешь, я не зря упомянул о сайте-портфолио и эстетике. здесь основной акцент идёт на посетителей специально пришедших, а не на случайных. Появление фоновой картинки через какой нибуть smooth эффект гораздо приятнее, при этом полезное время не расходуется абсолютно, т. к. основному контенту ничего не мешает.

s0rr0w · February 28, 2010

Смотря какие задачи преследуешь, я не зря упомянул о сайте-портфолио и эстетике. здесь основной акцент идёт на посетителей специально пришедших, а не на случайных. Появление фоновой картинки через какой нибуть smooth эффект гораздо приятнее, при этом полезное время не расходуется абсолютно, т. к. основному контенту ничего не мешает.

Это никто не оценит.

2_k · February 28, 2010

Это никто не оценит.

ваша позиция понятна. =)

вот качественный сайт с реализованным эффектом(левый нижний угол), на jquery так понимаю:

http://en.multon.ru/company/

всё действо с апельсином судя по всему происходит там в файле client1260977912.js

Но не могу заставить работать это у себя. Не подскажите что к чему?

s0rr0w · March 1, 2010

Но не могу заставить работать это у себя. Не подскажите что к чему?

Покажите результаты вашего труда. Телепаты в отпуске.

Searcher · March 1, 2010

Просто динамически меняем прозрачность в свойствах этого элемента.

2_k · March 1, 2010

Покажите результаты вашего труда. Телепаты в отпуске.

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

Скопировал и подгрузил у себя файлы. Заменил название дива на #middle, это тот див на который должен распространиться эффект(как я понял).

<script type="text/javascript" src="/js/backimgpre/mu/jquery-1.3.1.min1260742792.js"></script>
<script type="text/javascript" src="/js/backimgpre/mu/client1260977912.js"></script>

<script type="text/javascript">
		<!--
			$(document).ready(function(){
				C.init();
			})
			document.write('<style type="text\/css">#middle,#bigjuiceBg{visibility:hidden}<\/style>');
					//-->
		</script>

далее так же заменил на свой #middle в client1260977912.js

$(window).resize(function(){
	C.doResize()
})

var C={
	init: function(){
		C.bg.init();
		slider.init();
		C.content.init();
		C.flash.init();
		if(typeof Shadowbox=='object'){
			Shadowbox.init({
				handleOversize: 'drag',
				displayNav: 'true',
				enableKeys: 'true'
			});
		}
	},

	doResize: function(){
		C.bg.redraw();
	},

	bg: {
		$element: null,//левый нижний бг - либо фрукт, либо иной предмет
		animated: false,//флаг анимации, которая происходит сразу после загрузки страницы

		init: function(){
			if($('#middle').length){
				C.bg.$element=$('#middle');
			}else if($('#smljuiceBg').length){
				C.bg.$element=$('#smljuiceBg');
			}
			C.bg.redrawStart();
			setTimeout('C.bg.redrawEnd()',1000);
		},

		redraw: function(){
			C.bg.redrawStart();
			C.bg.redrawEnd();
		},

		redrawStart: function(){
			var mainbox_w=$('#mainBox')[0].offsetWidth;
			if(mainbox_w<1244){
				var left=parseInt((mainbox_w-1244)/2);
				var percent=100 + (1244-mainbox_w)/20;
			}else{
				var left=0;
				var percent=100;
			}
			$('#mainTbl').css({backgroundPosition:''+left+'px 0'});
			$('#mainBox').css({backgroundPosition:''+percent+'% 100%'});
			$bigjuice_bg=$('#bigjuiceBg');
			if($bigjuice_bg.length){
				$bigjuice_bg.css({height:'100%'});
			}
		},

		redrawEnd: function(){
			if(C.bg.$element){
				var $contentbox=$('#contentBox');
				var min_height=$('#submenu')[0].offsetHeight + C.bg.$element[0].offsetHeight;
				if($contentbox[0].offsetHeight-125 < min_height){
					$contentbox.height(min_height);
				}
				if(!C.bg.animated){
					C.bg.$element.css({visibility:'visible',opacity:0}).animate({opacity:1},'slow');
				}
			}
			if($bigjuice_bg.length){
				$('#bigjuiceBg').css({height:$('#mainBox')[0].offsetHeight+'px'});
				if(!C.bg.animated){
					$('#bigjuiceBg').css({visibility:'visible',opacity:0}).animate({opacity:1},'slow');
				}
			}
			if(!C.bg.animated){
				C.bg.animated=true;
			}
		}
	},

При тесте див не отображается, но и не появляется.. Нуждаюсь в помощи.

s0rr0w · March 1, 2010

Идентификаторы в контенте сопадают с теми, что в скрипте используются?

2_k · March 1, 2010

Идентификаторы в контенте сопадают с теми, что в скрипте используются?

совпадает только #middle, (идентификатор апельсина в примере).

тут начал копать по jquery, получилось плавно спрятать родительский элемент, по клику на дочерний:

<script type="text/javascript">
$(document).ready(function(){

 $("#Container #down").click(function(){
 $(this).parents("#Container").animate({ opacity: 'hide' }, "slow");
 });

});
</script>

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

Edited March 1, 2010 by 2_k

Great Rash · March 1, 2010

Когда срабатывает $(document).ready();? Уж не после полной загрузки документа (построения DOM)? Если да, то как то так:

$(document).ready(function(){
	$('#img').fadeOut('slow'); // #imd - id изначально спрятанной (opacity: 0) картинки
});

2_k · March 1, 2010

Когда срабатывает $(document).ready();? Уж не после полной загрузки документа (построения DOM)? Если да, то как то так:
$(document).ready(function(){
	$('#img').fadeOut('slow'); // #imd - id изначально спрятанной (opacity: 0) картинки
});

спасибо! , нужного эффекта добился слегка изменив ваш вариант:

$(document).ready(function(){
		$('#middle').animate({opacity: 1},'slow'); 
});

чтобы заработало в эксплоере дописал это изменив изначально visibility:hidden;

$(document).ready(function(){
		$('#middle').css({visibility:'visible',opacity:0}).animate({
				opacity: 1
			},'slow');
});

после загрузки страницы блок мягко появляется. Теперь думаю как это переложить не на весь блок, а только на фоновую картинку блока, чтоб контент грузился как обычно а fade эффект распространялся только на background image.

Edited March 1, 2010 by 2_k

Great Rash · March 1, 2010

Сделайте два контейнера, в одном будет картинка, а в другом - текст. Абсолютом расположите текст поверх бекграунда и анимируйте нижний слой с картиной.

2_k · March 1, 2010

Сделайте два контейнера, в одном будет картинка, а в другом - текст. Абсолютом расположите текст поверх бекграунда и анимируйте нижний слой с картиной.

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

Great Rash · March 1, 2010

opacity? Скорее всего нет... по этому и приходится извращаться с абсолютами

Может в CSS 3.0 что-то будет, но ИЕ запорет все, в этом я уверен.

2_k · March 1, 2010

opacity? Скорее всего нет... по этому и приходится извращаться с абсолютами
Может в CSS 3.0 что-то будет, но ИЕ запорет все, в этом я уверен.

да уж, но в моём случае с абсолютами извращатся не получится т к вся вёрстка летит сразу же...

Great Rash · March 1, 2010

А есть ссылка на сайт?

2_k · March 1, 2010

А есть ссылка на сайт?

не, на локальном сервере только

появился ещё один баг в ie, после добавления этого эффекта на jquery перестал корректно работать DD_belatedPNG.fix.

пример:

Sign In

Подгрузка background картинок с эффектом fade in

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information