iT邦幫忙

0

lazyload ,當圖片加載完成時,如何增加 fadeOut ?

取用
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();
其實是一樣的功能吧?可以擇一
火爆浪子 iT邦研究生 1 級 ‧ 2018-09-14 13:20:09 檢舉
感謝回答。
我知道 jquery 有 fadeIn,fadeOut 可以使用,但我不知道能加在lazyload 的哪裡?
larrykkk iT邦新手 5 級 ‧ 2018-09-14 14:48:56 檢舉
你可以改用看這個
https://github.com/aFarkas/lazysizes#css-api
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答