Question

我试图让图像在加载时淡入，但它不起作用。

HTML

<li ng-show="bekmez">Username</li>
<li ng-hide="bekmez">Login Button</li>

JQ

<div class="carl-dair">
        <a href="pages/about.html"><img src="images/carl-dair.png"></a>
</div>

任何帮助都会受到赞赏，因为我是JS的初学者。谢谢！

Answer 1

正如我在评论中所说，您使用class="carl-dair"并将其用作js $('#carl-dair')中的ID，因此请将其更改为$('.carl-dair')

使用它的错误方式

$(document).ready(function() { 
   $('#carl-dair').load fadeIn("slow");
});

尝试这样

$(document).ready(function() { 
  $('.carl-dair img').on('load',function(){
     $(this).fadeIn("slow");
  });
});

请确保在css中将其显示为无

.carl-dair img{
   display : none;
}

如果在css中使用

.carl-dair{
   display : none;
}

并希望在图像加载后显示＃carl-dair div，您可以使用

   $(document).ready(function() { 
      $('.carl-dair img').on('load',function(){
         $(this).closest('.carl-dair').fadeIn("slow");
      });
    });

并且无需将图像显示为无

你应该知道的事情

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

它不能始终如一地工作，也不能可靠地跨浏览器它不会   如果图像src设置为与src相同，则在WebKit中正确触发   在它没有正确冒泡DOM树之前可以停止射击   对于已经存在于浏览器缓存中的图像

来源https://api.jquery.com/load-event/

所以代替.load() ..使用.on('load',function(){})

DEMO

试图让图像在加载时淡入淡出

1 个答案: