Question

在这个网站的主页上 - http://bit.ly/a3IoV5 - 我有一个大图像淡化JQuery画廊。

这是JQuery：

$('.fadein img').addClass('js');

$(function() {
    $('.fadein').children().eq(0).appendTo('.fadein').show();
    setInterval(function() {
        $('.fadein :first-child').hide().appendTo('.fadein').fadeIn(2000);
    }, 8000);
});

CSS：

.js .fadein img { display: none; }
.js .fadein img:first-child { display: block; }
.fadein img { position: absolute; right: 0; top: 0; width: 1000px; height: 300px; }

和HTML

<div class="fadein"> 
<img src="header1.png" /> 
<img src="header2.png" /> 
<img src="header3.png" /> 
<img src="header4.png" /> 
<img src="header6.png" /> 
<img src="header7.png" /> 
<img src="header9.png" /> 
<img src="header10.png" /> 
<img src="header12.png" /> 
</div>

我希望有某种图像加载技巧可以帮助加载页面本身的速度。任何帮助将不胜感激。

Answer 1

您应该在页面准备好后加载图像。根据图像大小，这可能会显着提高速度。

因此，您可能会在加载第二张图像时显示第一张图像。第二张图像准备就绪后，即可开始淡入淡出动画。

Answer 2

如果要在 fadein <元素下的所有 img 标记下添加一个“ js ”类，只需从您提供的代码开始/ strong>类按照：

$('.fadein img').addClass('js');

您的CSS选择器可能需要更改：

/* Your Current CSS */ .js .fadein img { display: none; } .js .fadein img:first-child { display: block; } /* Suggested CSS */ .fadein img.js { display:none; } .fadein img.js:first-child { display:block; }

如果父元素也具有 js 类，则当前代码将起作用，但对使用第一个jQuery操作添加该类的元素不会产生任何影响。

如果您担心访问者在最初加载页面时遇到延迟，您可以通过向 fadein 元素添加背景图片来提供至少一个占位符图形，并且可能使用更加压缩/基本的图像（如低质量的JPEG）。

/* Suggested CSS */ .fadein { height:300px;width:1000px;background:#F5F5F5 url('http://pottstownarts.org/wp-content/themes/paca/files/headerimgs/basic.jpg') no-repeat right top; }

一旦它开始运行，这个图像将被库覆盖（为了积极，一旦Gallery开始滚动，你总是可以让jQuery删除CSS背景图像设置，因此任何半透明图像都不会失去光泽）。

$( '.fadein' ).css( 'background-image' , '' );

帮助提高我的JQuery Fading Gallery的效率

2 个答案: