Jquery Cycle 插件和 IE - 预加载并调整大小，但间歇性地，图像在 IE 中无法正确渲染/调整大小

Question

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

目标

目标是获取许多图像(来自 cms 数据库)，重新调整每个图像的高度或宽度(取决于其与容器的长宽比相比的长宽比)，以便它适合容器，将其置于容器中央，然后运行幻灯片(项目图像)。

问题

循环幻灯片在图像加载之前运行(图像太大，因此在图像显示之前可以循环播放 3 张幻灯片)。希望它等到图像加载完毕，在加载时显示 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 和 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
       }
    }

});