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

【问题标题】：Help making my JQuery Fading Gallery more efficient帮助提高我的 JQuery Fading Gallery 的效率
【发布时间】：2010-06-30 14:43:43
【问题描述】：

在这个网站的主页上 - 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>

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

【问题讨论】：

标签： jquery loading image-gallery fading

【解决方案1】：

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

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

【讨论】：

是的，我就是这么想的，只是我对 JQuery 了解不够，无法自己写出来。

【解决方案2】：

从您提供的代码开始，如果您要向具有 fadeinimg 标记添加“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; }

该图像一旦开始运行就会被画廊覆盖（当然，一旦画廊开始滚动，您总是可以让 jQuery 删除 CSS 背景图像设置，因此任何半透明的图像都不会被玷污）。

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

【讨论】：