Question

重新调整图像大小并运行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'
    }); 
});

Answer 1

图像2＆amp; 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
       }
    }

});

Jquery循环插件和IE - 预加载和重新调整大小，但间歇性地，在IE中正确地渲染/重新调整大小

1 个答案: