javascript - Jquery 让 fadeIn 仅在图像加载后才工作

Question

如何让下面的内容仅在 fadeOut 中的所有内容完全加载并准备好显示后淡入？发生的情况是，第一次加载页面时，文本框右上角的图像会跳跃并且不会平滑淡入，这很烦人。

P.s 不要问我刚刚构建的网页设计哈哈

http://goodeggsafety.com/dev/

//苏格兰车内 child 安全

        $("#link_1").click(function(e) {

         e.preventDefault();

         var img = $("#childbig2").attr('src');//Get current image

         if(img != 'images/childbig.png'){ //Check if current image is the clicked image if not carry on..
            //Variables
             var imgurl = 'images/childbig.png';
             var flag = 'images/scotland.png';
             var html = 'Visit the Scottish<br /> In-Car child safety<br /> campaign website. <br /><br /> Expert advice on seat and stage selection for your child. <br /><br />';
                 html = html + 'Car seat checking clinics - check<br /> when and where they are in your<br /> area for you to attend and have<br /> your seat checked by a Good Egg<br /> In-Car Expert. <br /><br /> News updates, competitions and much much more.';

             var linkurl = 'http://www.protectchild.co.uk/';//Link url 

              $("#content_1").fadeOut(600, function(){//fade out
                  $("#childbig2").attr('src', imgurl);//change image
                  $("#childbig2").attr('alt', 'In-Car Child Safety');//change image alt tag
                  $("#title_img").attr('src', flag);//change flag
                  $("#title_h2").html('Scotland');//change title
                  $("#text_title").html('In-Car Child Safety'); //Change second title
                  $("#text_content").html(html);//Change main text content
                  $("#weblink").attr('href', linkurl);//Change link url
                  $("#weblink").attr('title', linkurl);//Change link title
                  $("#arrowlink").attr('href', linkurl);//Change link on arrow url
                  $("#arrowlink").attr('title', linkurl);//change link on arrow title    
              }).fadeIn(600);//fade in speed, miliseconds   
          }
        });

Answer 1

您必须将“*content_1*”的.fadeIn函数绑定(bind)到img节点(childbig2)上的.load:

$("#content_1").fadeOut(600, function(){
  var $content = $(this);
  var $childbig2 = $("#childbig2");

 $childbig2  
    .load(function() {
        $childbig2.off('load');
        $content.fadeIn(600); //fade in speed, miliseconds 
    })
    .attr('src', imgurl)
    .attr('alt', 'In-Car Child Safety') //change image alt tag

  $("#title_img").attr('src', flag);
  $("#title_h2").html('UK');
  $("#text_title").html('In-Car Child Safety'); 
  $("#text_content").html(html);
  $("#weblink").attr('href', linkurl);
  $("#weblink").attr('title', linkurl);
  $("#arrowlink").attr('href', linkurl); 
  $("#arrowlink").attr('title', linkurl);  
}); 

您可以在 jQuery 1.7.x 上使用 .off 全新功能。

请注意，绑定(bind) .load() 的意思是:“加载图像后执行 XX”。在本例中，“执行您 parent 的 fadeIn()”。

同样为了实现 IExplorer 缓存兼容性:首先使用 .load()，然后使用 .attr()

记住要取消绑定(bind)(off()函数)，否则每次应用load()函数时都会排队(调用)。

问候