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

lazyload js jquery

火爆浪子 2018-08-01 15:57:39 ‧ 1961 瀏覽

分享至

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 }} |

直播中

1 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-08-01 16:18:07

最佳解答

作個檢查就行了…

<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>

回應 10
分享
檢舉

看更多先前的回應...收起先前的回應...

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

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

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

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

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-01 16:33:50 檢舉

像上面那樣，試試吧

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

哈，好像就沒有反應了。

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-01 16:52:10 檢舉

把你的範例丟上來，不然也沒法試～

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-01 17:01:39 檢舉

改了一下，你再試試～

火爆浪子 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="">

我也想個快兩個小時

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-01 17:42:29 檢舉

$(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');
		}
	});
});