lazyload ，當圖片加載完成時，如何增加 fadeOut ？

jquery lazyload jquery3.1.1

火爆浪子 2018-09-14 12:27:55 ‧ 2200 瀏覽

分享至

取用
lazyload
https://github.com/tuupola/jquery_lazyload/tree/2.x

Jquery

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

var img = $('.lazyload-blog-selector');
img.lazyload();
img.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'); 拿掉，他一樣可以運行...

看更多先前的討論...收起先前的討論...

larrykkk iT邦新手 5 級 ‧ 2018-09-14 13:15:02 檢舉

https://www.w3schools.com/jquery/jquery_fade.asp

larrykkk iT邦新手 5 級 ‧ 2018-09-14 13:18:35 檢舉

img.removeClass('lazyload-blog-selector'); 就只是做完lazyload之後拿掉那個class而已
還有
這行$(".lazyload-blog-selector").lazyload();
跟這兩行
var img = $('.lazyload-blog-selector');
img.lazyload();
其實是一樣的功能吧?可以擇一