在下一张图片加载前，每次都会显示第一张图片

Question

这是我的网站http://www.alienchela.com/portfolio.html。

首先点击任何客户端图片就可以了。

但是，如果你在未来按钮每次点击的时间，然后就可以看到。首先先前的图像出现，然后下一张图像加载。

下面是代码：

var ticker = $('.img_wrap'); 
      $('.next').click(function() { 
       $('.img_panel:visible').fadeOut(1000, function() { 
         $(this).appendTo(ticker); 
         ticker.children().first().show(function(){ 
          var artit = $(this).attr('title'); 
          $(this).load(artit+'.txt'); 
       }); 
        }); 
       $(ticker).hide().delay(1500).fadeIn(1000); 
      }); 

我做了黑客攻击。我做了一些延迟的过渡。

$(ticker).hide().delay(1500).fadeIn(1000); 

我不是那么好是JS。

任何帮助表示赞赏。

Answer 1

在这里你去：

分析

1.初始状态

<div class="img_wrap"> 
    <div class="img_panel" title="pixi">pixi</div> 
    <div class="img_panel" title="mus">mus</div> 
    <div class="img_panel" title="flash">flash</div> 
    <div class="img_panel" title="dir">dir</div> 
    <div class="img_panel" title="rpi">rpi</div> 
    <div class="img_panel" title="ac">ac</div> 
    <div class="img_panel" title="css">css</div> 
    <div class="img_panel" title="nagraj">nagraj</div> 
</div> 

2.点击“AC”

<div class="img_wrap"> 
    <div class="img_panel" title="pixi"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="mus"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="flash"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="dir"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="rpi"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="ac" style="display: block;"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="css"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
    <div class="img_panel" title="nagraj"> 
     <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant"> 
    </div> 
</div> 

说明

每个img_panel具有用于 “AC” 报头的图像。他们没有CSS display:none;，这意味着这些div是可见的。执行时，

$('.img_panel:visible').fadeOut(1000, function() { 
    $(this).appendTo(ticker); 
    ticker.children().first().show(function(){ 
     var artit = $(this).attr('title'); 
     $(this).load(artit+'.txt'); 
}); 

当前项目被隐藏并显示下一个项目。在过渡期间，当前和下一个项目都会部分隐藏，并且背景div中的图像会显示。

有问题的代码

$('.work li').click(function(){ 
    var clientitle = $(this).attr('title'); 
    $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn(); 
    $('.img_panel[title="'+clientitle+'"]').fadeIn(); 
    var cltxt = clientitle+'.txt' 
    $('.img_panel').load(cltxt); 
}); 

解决方案

// Only load data to active div 
$('.img_panel[title="' + clientitle + '"]').load(cltxt); 

而且，这是更好地做到这一点：

// Hide all divs 
$('.img_panel').hide(); 
// Load and unhide active div 
$('.img_panel[title="' + clientitle + '"]').load(cltxt).show(); 

---

问题2

当你点击“AC”，然后单击Next，代码变成这样：

<div class="img_wrap" style="display: block;"> 
    <div class="img_panel" title="pixi" style="display: block;">...</div> 
    <div class="img_panel" title="mus">...</div> 
    <div class="img_panel" title="flash">...</div> 
    <div class="img_panel" title="dir">...</div> 
    <div class="img_panel" title="rpi">...</div> 

    <div class="img_panel" title="css">...</div> 
    <div class="img_panel" title="nagraj">...</div> 
    <div class="img_panel" title="ac" style="display: none;">...</div> 
</div> 

看到，ac元素进入到最后的，作出该命令错误的下一迭代。

解决方案

没有必要重新排列div元素。只需使用一系列标题和索引即可处理next和prev。

Answer 2

var ticker = $('.img_wrap'); 
$('.next').click(function() { //When the next button is clicked 
    $('.img_panel:visible').fadeOut(1000, function() { //Fade out the current active image 
    $(this).appendTo(ticker); //And move its div to the bottom of ticker 
    ticker.children().first().show(function(){ //Then show the first div in ticker 
     var artit = $(this).attr('title'); 
     $(this).load(artit+'.txt'); 
    }); 
    }); 
    $(ticker).hide().delay(1500).fadeIn(1000); 
}); 

默认顺序为：陂溪万亩闪光灯DIR RPI交流CSS nagraj。

与您的代码的问题是，当页面加载新鲜，你从菜单中选择一个图像，它会带你在那里。它假设，一旦它把你带到那里，活跃的div就在顶端，当它可能在任何地方，包括中间。

为了解决这个问题，你需要将ticker中的所有div移动到最底部，这样保留了原始顺序，但是活动的顺序应该保留在顶部。

你的相关代码实际上是在这里，当从菜单中选择一个项目：

$('.work li').click(function(){ 
    var clientitle = $(this).attr('title'); 
    $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn(); 
    $('.img_panel[title="'+clientitle+'"]').fadeIn(); 
    var cltxt = clientitle+'.txt' 
    $('.img_panel').load(cltxt); 
}); 

像这样的东西应该解决的问题：

$('.work li').click(function(){ 
    var clientitle = $(this).attr('title'); 
    $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn(); 
    $('.img_wrap').children().each(function() { 
    if ($(this).attr('title') == clientitle) { 
     return false; 
    } 
    $(this).appendTo($('.img_wrap')); 
    }); 
    $('.img_panel[title="'+clientitle+'"]').fadeIn(); 
    var cltxt = clientitle+'.txt' 
    $('.img_panel').load(cltxt); 
}); 

Answer 3

它必须是这样的一个错误或跨浏览器的问题，因为它在IE-8和mozilla 18.0.2中运行良好，第一次加载图像只发生在第一轮下一个按钮，然后显示正确。一个可能的错误可能是在。孩子（）函数，这里所说的 - What is the difference between children and childNodes in JavaScript?

Answer 4

建议... 添加类active到活动.img_panel当您第一次访问它，然后使用类似这样的导航：

var ticker = $('.img_wrap'); 
$('.next').off('click').click(function() { 
    ticker.fadeOut(500,function(){ 
    var $current = $('.img_panel.active'); 
    var nextIndex = ($current.index()+1)<$('.img_panel').length?$current.index()+1:0; 
    var $next = $('.img_panel').eq(nextIndex); 
    $current.hide().removeClass('active'); 
    $next.show(function(){ 
     var artit = $(this).attr('title'); 
     $(this).load(artit+'.txt',function(){ 
     ticker.fadeIn(500)}).addClass('active'); 
     }); 
    });    
}); 

对于先前的功能只是改变

var nextIndex = ($current.index()+1)<$('.img_panel').length?$current.index()+1:0; 

到

var nextIndex = ($current.index())>0?$current.index()-1:$('.img_panel').length-1; 

我认为会做这项工作和循环...（当我测试它时它做了）请记住，当没有任何活动时，从每个元素中移除active类...

Answer 5

看起来你错过了这个事实在你的代码中，你启动了一个空div的转换。一旦转换完成，您就可以开始将内容加载到该div中。

所以，你应该做这样的事情：

var ticker = $('.img_wrap'); 
$('.next').click(function() { 
    $('.img_panel:visible').fadeOut(1000, function(){ 
     $(this).appendTo(ticker); 
     var placeholder = ticker.children().first(); 
     var artit = placeholder.attr('title'); 
     placeholder.load(artit+'.txt', function(){$(this).show()}); 
    }); 
}); 

不知道上面的代码将工作直线距离，但你有这个想法。