lazyload ,當圖片加載完成時,如何增加 fadeIn/Out ?

发布于 2022-09-07 22:56:58 字数 781 浏览 21 评论 0

取用
lazyload
https://github.com/tuupola/jq...

Jquery

$(".lazyload-blog-selector").lazyload();

$(".lazyload-blog-selector").on('load',function(){
  img.removeClass('lazyload-blog-selector');
});

HTML

<img data-src="真實圖片網址" src="/images/lazyload.png" class="lazyload-blog-selector">

我是使用這樣運行 lazyload
我看代碼的原理是當圖片讀取完成就出現該圖片,只是我發現他會是直接出現,沒有效果。我想加入一個效果是淡出淡入 fadeIn/fadeOut,可能是將 /images/lazyload.png 淡出,或是將圖片淡入,這有辦法實現嗎?我看他的Jquery代碼不知道能從哪裡下手。
然後我發現我把 img.removeClass('lazyload-blog-selector'); 拿掉,他一樣可以運行...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暮光沉寂 2022-09-14 22:56:58

初始化的时候加上effect : "fadeIn"参数试试看

$(".lazyload-blog-selector").lazyload({
    effect : "fadeIn"
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文