iT邦幫忙

0

lazyload 上面的預設圖怎麼改變大小?

  • 分享至 

  • xImage

https://piglife.tw/%E3%80%90%E6%8A%80%E8%A1%93%E7%AD%86%E8%A8%98%E3%80%91%E5%88%A9%E7%94%A8lazyload-js-%E5%AF%A6%E7%8F%BE%E5%9C%96%E7%89%87%E5%BB%B6%E9%81%B2%E5%8A%A0%E8%BC%89%E5%8A%A0%E5%BF%AB%E7%B6%B2%E7%AB%99/

我找到這個資源
只是

<img class="lazyload" src="loading.gif(loading.gif圖片路徑)" data-src="要加載的圖片路徑" />

loading 這個圖片,我明明是很小一張 30x30
但是他顯示的時候卻是完全放大的
如果改 img 的樣式,要加載的圖片也會跟著變.....
請問要怎麼實現是只有 loading 的時候我是可控制大小的 like 30x30
當原始圖出現時不會影響?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
最佳解答

作個檢查就行了…

<html>
<head>
    <title>lazyload test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/style/jquery-ui.css" />
    <script type="text/javascript" src="/scripts/lib/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/lazyload.js"></script>
    <!-- CSS -->
    <style type="text/css">    
        .admin-lazyload{
            width:30px;
            height:30px;
            border:1px solid black;
        }
    </style>

    <!-- Javascript -->
    <script language="javascript">
        $(document).ready(function() {
            var img = $('.admin-user-icon.admin-lazyload');
            img.lazyload();
            img.on('load',function(){
                if(img.attr('src') == '/test/octopus.gif'){
                    img.removeClass('admin-lazyload');
                }else{
                    img.addClass('admin-lazyload');
                }
            });
        });
    </script>
</head>
<body>
<img class="admin-user-icon admin-lazyload" data-src="/test/octopus.gif" src="/test/giphy.gif">
</body>
</html>
看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2018-08-01 16:22:48 檢舉

不行呢,跑完之後我加載的圖也會一樣小。
衍伸出一個問題,可以把loading圖片水瓶垂直置中嗎?

火爆浪子 iT邦研究生 1 級 ‧ 2018-08-01 16:23:32 檢舉

我找不到他加載完後的事件

像上面那樣,試試吧

火爆浪子 iT邦研究生 1 級 ‧ 2018-08-01 16:50:12 檢舉

哈,好像就沒有反應了。

把你的範例丟上來,不然也沒法試~/images/emoticon/emoticon10.gif

改了一下,你再試試~

火爆浪子 iT邦研究生 1 級 ‧ 2018-08-01 17:31:06 檢舉
$(document).ready(function() {

  $('.admin-lazyload').each(function(index, el) {
    $(this).attr('src', '../images/lazyload30.svg');
  });

  $("img.admin-lazyload").lazyload();

  var img = $('.admin-lazyload');
  img.on('load',function(){
		if(img.attr('src') == '../images/lazyload30.svg'){
			img.addClass('admin_lazyload_style');
		}else{
			img.removeClass('admin_lazyload_style');
		}
	});

});
<img class="admin-user-icon admin-lazyload"
          data-src="<?=$row['icon'];?>" src="">

我也想個快兩個小時

$(document).ready(function() {
  var img = $('.admin-lazyload');

  img.on('load',function(){
		if(img.attr('src') == '../images/lazyload30.svg'){
			img.addClass('admin_lazyload_style');
		}else{
			img.removeClass('admin_lazyload_style');
		}
	});
});
火爆浪子 iT邦研究生 1 級 ‧ 2018-08-01 18:31:40 檢舉

哈哈,大小還是依樣沒有變,確定有這個style
.admin_lazyload_style{
width: 30px;
height: 30px;
}

測試後沒問題了,修正如上…

我要發表回答

立即登入回答