對jquery.lazyload.js使用的心得

時間 2019-11-10

標籤 jquery.lazyload.js jquery lazyload 使用心得欄目 JQuery 简体版

原文原文鏈接

今天想對項目中作一些優化，作一個圖懶加載，我用的是jquery.lazyload.js，網址：http://www.jq22.com/jquery-in...。
給的案例是針對img，而後我猜想可否在背景圖也可以實現，粗略的看了一下源碼，好像是有這個功能的：
javascript

我把本身測試的代碼貼出來，包括img和背景圖懶加載測試（js和圖片須要本身引入）：html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lazy Load Enabled</title>
<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->
<style>
    .lazy {
        width: 50%;
        height: 500px;
    }
    .bgs {
        width: 50%;
        height: 500px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
</style>
</head>
<body>

    <img class="lazy" data-original="img/1.jpg">
    <img class="lazy" data-original="img/2.jpg">
    <img class="lazy" data-original="img/3.jpg">
    <img class="lazy" data-original="img/4.jpg">
    <img class="lazy" data-original="img/5.jpg">
    <img class="lazy" data-original="img/6.jpg">
    <!-- 背景圖也能夠 -->
    <div class="lazy bgs" data-original="img/placeholder.png"></div>

    
    <script src="jquery-1.11.0.min.js"></script>
    <script src="jquery.lazyload.js?v=1.9.1"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {

        $(".lazy").lazyload({
            //用圖片提早佔位
            placeholder : "img/placeholder.png", 
            // 載入使用何種效果
            effect: "fadeIn", 
        });
      });
    </script>
</body>
</html>

這個插件的配置http://www.jq22.com/jquery-in...，這裏有的。
這篇文章很簡單，我寫的目的就是爲了測試背景圖是否能夠用。
可是這個插件不管是是用img仍是背景圖都寬高都是須要寫上去的，寫在行內仍是style樣式裏面均可以，這對頁面適配不是很友好，我不知道有沒有朋友解決這種問題，若是有的話也能夠分享一下。html5