2

重新调整图像大小并运行 jquery 循环插件 ( http://www.jquery.malsup.com/cycle/ )。我也在使用预加载器插件。

目标

目标是获取许多图像（来自 cms 数据库），重新调整每个图像的高度或宽度（取决于其纵横比与容器纵横比的比较），使其适合容器，居中在容器中，然后运行幻灯片（项目图像）。

问题

循环幻灯片在图像加载之前运行（图像太大，因此它可以在图像显示之前循环播放 3 张幻灯片）。希望它等到 iamges 加载完毕，在加载时显示 gif。

这是我正在运行以预加载、重新调整大小和运行循环幻灯片的 html 和 jquery 代码：

<div id="slideshow" class="single_project_images pics">
    <img src="/components/com_sedarticles/assets/1333588925" />
    <img src="/components/com_sedarticles/assets/1333852906" />
    <img src="/components/com_sedarticles/assets/1333852914" />
 </div>

剧本：

$(document).ready(function() {
    $(".single_project_images img").each(function(){
        $(this).imagesLoaded(function(){
            var w = $(this).width();
            var h = $(this).height();
            if( (w/h) < 0.85){
                $(this).height("541px");
                $(this).css("margin-left", parseInt((460 - $(this).width())/2)+"px");
            }else{
                $(this).width("460px");
                $(this).css("margin-top", parseInt((541 - $(this).height())/2)+"px");
            }
        }); 
});

    $('#slideshow').cycle({
        speed:  1000,
        timeout: 5000,  
        pager:  '#nav'
    }); 
});
4

1 回答 1

0

图像 2 和 3 没有显示的原因是因为在 css 中 margin-top 设置为 1000px 并且它没有被调整，因为这两个图像不符合你的 js 中的 if 条件。

为了防止幻灯片在加载图像之前开始，您需要跟踪已加载的数量并在它们全部完成后调用周期。

像这样的东西：

var totalimages = 6, imagesloaded = 0;

$('img').each(function() {

    this.onload = function() {
       imagesloaded++;
       if(imagesloaded === totalimages){
           //call cycle plugin
       }
    }

});
于 2012-04-14T05:16:12.810 回答