jQuery鼠標滾動頁面圖片延遲加載
編輯：網頁特效代碼
這裡延遲加載的意思是，拖動滾動條時，在圖片出現在浏覽器顯示區域後才加載顯示。在這之前全部圖片都由一張圖片代替。節省流量，減輕服務器負擔。
效果展示
請用鼠標或者鍵盤方向鍵使頁面向下滾動，注意圖片的變化。本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實現了圖片延遲加載，使用非常方便。在本文後面附有源碼下載。
用到的加載中的圖片：
代碼如下：
源碼下載：http://hovertree.com/h/bjaf/77wklbrj.htm
效果展示
請用鼠標或者鍵盤方向鍵使頁面向下滾動，注意圖片的變化。本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實現了圖片延遲加載，使用非常方便。在本文後面附有源碼下載。
用到的加載中的圖片：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery鼠標滾動頁面圖片延遲加載_何問起</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鼠標滾動頁面圖片延遲加載</h1>
請向下滾動頁面。注意圖片的變化。
<a href="http://hovertree.com">何問起</a>
<a href="http://hovertree.com/menu/texiao/">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/yanchijaizai.htm">代碼說明</a>
</div>
<div class="hovertreebox">
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425191.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png">
</div>
<div class="img_hovertreebox">
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916425007.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png">
</div>
</div>
</body>
</html>
源碼下載：http://hovertree.com/h/bjaf/77wklbrj.htm
小編推薦
熱門推薦