0

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

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

4

2 回答 2

0

You should load the images after the page is ready. Depending on the image size this could increase the speed dramatically.

So you might display the first image while loading the second image. As soon as the second image is ready you start your fade animation.

于 2010-06-30T14:58:20.813 回答
0

只需从您提供的代码开始，如果您要向具有淡入淡出类的元素下的所有 img 标签添加一个“ js ”类，如下所示：

$('.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 操作添加该类的元素产生任何影响。

如果您担心访问者在最初加载页面时看到延迟，您可以通过向淡入淡出元素添加背景图像来提供至少一个占位符图形，并且可能使用更压缩/基本的图像（如低质量 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' , '' );
于 2010-07-01T03:26:24.173 回答