jQuery實現(xiàn)鼠標(biāo)滾動圖片延遲加載效果附源碼下載

更新時間：2016年06月28日 14:33:34 作者：roucheng

本文給大家分享jquery技術(shù)實現(xiàn)圖片延時加載效果，本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實現(xiàn)了圖片延遲加載，使用非常方便，需要的朋友可以下載源碼

這里延遲加載的意思是，拖動滾動條時，在圖片出現(xiàn)在瀏覽器顯示區(qū)域后才加載顯示。在這之前全部圖片都由一張圖片代替。節(jié)省流量，減輕服務(wù)器負(fù)擔(dān)。

請用鼠標(biāo)或者鍵盤方向鍵使頁面向下滾動，注意圖片的變化。本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實現(xiàn)了圖片延遲加載，使用非常方便。在本文后面附有源碼下載。

效果展示源碼下載

用到的加載中的圖片：

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery鼠標(biāo)滾動頁面圖片延遲加載_何問起</title><base target="_blank" />
<meta name="description" content="何問起">
<meta name="keywords" content="何問起">
<link href="" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.hovertreebox {
padding-top: 800px;
}
.img_hovertreebox {
float: left;
width: 33%;
text-align: center;
margin-bottom: 100px;
}
.hovertreeinfo{text-align:center;}
.hovertreeinfo a{color:blue;}
</style>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(event) {
var ah=$(window).scrollTop();
var ch=$(window).height()
$('.img_hovertreebox').each(function(){
var bh=$(this).offset().top;
if(ch+ah-200>bh){
var a=$(this).find('img').attr("load_src");
$(this).find('img').attr("src",a);
}
})
});
})
</script>
</head>
<body>
<div class="hovertreeinfo"><h1>jQuery鼠標(biāo)滾動頁面圖片延遲加載</h1>
請向下滾動頁面。注意圖片的變化。
<a >何問起</a>
<a >網(wǎng)頁特效</a>
<a >代碼說明</a>
</div>
<div class="hovertreebox">
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img4.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png">
</div>
<div class="img_hovertreebox">
<img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png">
</div>
</div>
</body>
</html>

以上所述是小編給大家介紹的jQuery實現(xiàn)圖片延遲加載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: