| 插件名稱 | 用途 | 插件官網地址 |
|---|---|---|
| fontawsome | CSS圖標插件 | http://fontawesome.io |
| easyui | 基於jQuery的用戶界面插件集合 | http://www.jeasyui.net |
| jqueryui | 同上 | http://jqueryui.com |
| Amaze ui | 中國首個H5跨屏框架 | http://amazeui.org |
| bootstrap | 同上,應用最廣泛,推薦 | http://getbootstrap.com/2.3.2/ |
| bxslider | 一個jQuery插件內容滑塊 | http://bxslider.com |
| jquery.lazyload | 圖片延遲加載 | http://www.appelsiini.net/projects/lazyload |
bootstrap使用步驟
- 導入CSS
- 導入jQuery(2.0/1.12)
- 導入JS
- bootstrap模板
圖片延遲加載
參數:
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 對指定標簽對象內的圖片實現效果，表示在此標簽中滾動時，觸發加載（注意：如果容器未設置height和overfload:auto，那么會默認加載所有圖片）
threshold: 100, //當圖片頂部距離顯示區域還有100像素時，就開始加載
placeholder : "img/grey.gif", // 圖片未加載時，占位
effect: "slideDown", // 圖片出現的效果，值有show(直接顯示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出現的時間
event: 'scroll', // 滾動滾輪時觸發，可以是：click、mouseover等
data_attribute: 'original', // img標簽中保存url的自定義屬性，默認：data-original
skip_invisible: true, // 是否跳過已經隱藏的圖片（display:none）
failure_limit: 2, // 由於延遲加載是根據Dom從上到下執行
// 如果遇到Dom位置在上，但是圖片定位在下導致看不到，那么會以為之后的圖片不在應用延遲加載
// 此處的failure_limit用於限制如果出現N個【Dom位置在上，但是圖片定位在下】才終止
appear: function(){ // 當圖片位置剛出現在視圖時，觸發此事件
$(this).attr('src');
},
load: function(){ // 當圖片路徑加載之后，觸發此事件
$(this).attr('src');
}
});
})
例子:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 auto;
}
.pg-header{
height: 48px;
background-color: #3b5998;
}
.w{
width: 980px;
margin: 0 auto;
}
.clearfix:after{
clear: both;
content: '.';
visibility: hidden;
height: 0;
display: block;
}
.product-list .item{
float: left;
height: 240px;
width: 184px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
.product-list .item .lazy{
height: 200px;
width: 184px;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="w">
<div class="product-list clearfix">
<div class="item">
<img class="lazy" data-original="img/1.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/2.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/3.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/4.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/5.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/6.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/7.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/8.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/9.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/10.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/11.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/12.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/13.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/14.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/15.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/16.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/17.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/1.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/2.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/3.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/4.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/5.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/6.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/7.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/8.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/9.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/10.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/11.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/12.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/13.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/14.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/15.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/16.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/17.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/1.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/2.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/3.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/4.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/5.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/6.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/7.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/8.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/9.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/10.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/11.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/12.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/13.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/14.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/15.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/16.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/17.png" />
</div>
</div>
</div>
</div>
<div class="pg-footer"></div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 對指定標簽對象內的圖片實現效果，表示在此標簽中滾動時，觸發加載（注意：如果容器未設置height和overfload:auto，那么會默認加載所有圖片）
threshold: 100, //當圖片頂部距離顯示區域還有100像素時，就開始加載
placeholder : "img/grey.gif", // 圖片未加載時，占位
effect: "slideDown", // 圖片出現的效果，值有show(直接顯示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出現的時間
event: 'scroll', // 滾動滾輪時觸發，可以是：click、mouseover等
data_attribute: 'original', // img標簽中保存url的自定義屬性，默認：data-original
skip_invisible: true, // 是否跳過已經隱藏的圖片（display:none）
failure_limit: 2, // 由於延遲加載是根據Dom從上到下執行
// 如果遇到Dom位置在上，但是圖片定位在下導致看不到，那么會以為之后的圖片不在應用延遲加載
// 此處的failure_limit用於限制如果出現N個【Dom位置在上，但是圖片定位在下】才終止
appear: function(){ // 當圖片位置剛出現在視圖時，觸發此事件
$(this).attr('src');
},
load: function(){ // 當圖片路徑加載之后，觸發此事件
$(this).attr('src');
}
});
})
</script>
</body>
</html>