jQuery實(shí)現(xiàn)鼠標(biāo)滾動(dòng)圖片延遲加載效果附源碼下載
更新時(shí)間：2016年06月28日 14:33:34 作者：roucheng
本文給大家分享jquery技術(shù)實(shí)現(xiàn)圖片延時(shí)加載效果，本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實(shí)現(xiàn)了圖片延遲加載，使用非常方便，需要的朋友可以下載源碼
這里延遲加載的意思是，拖動(dòng)滾動(dòng)條時(shí)，在圖片出現(xiàn)在瀏覽器顯示區(qū)域后才加載顯示。在這之前全部圖片都由一張圖片代替。節(jié)省流量，減輕服務(wù)器負(fù)擔(dān)。
請(qǐng)用鼠標(biāo)或者鍵盤方向鍵使頁面向下滾動(dòng)，注意圖片的變化。本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實(shí)現(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)滾動(dòng)頁面圖片延遲加載_何問起</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)滾動(dòng)頁面圖片延遲加載</h1>
請(qǐng)向下滾動(dòng)頁面。注意圖片的變化。
<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實(shí)現(xiàn)圖片延遲加載 ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動(dòng)特效
- jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)滾動(dòng)鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實(shí)現(xiàn)的鼠標(biāo)滑過彈出放大圖片特效
- jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動(dòng)展開與隱藏效果
- 基于jquery實(shí)現(xiàn)鼠標(biāo)滾輪驅(qū)動(dòng)的圖片切換效果
- jquery實(shí)現(xiàn)鼠標(biāo)滑過后動(dòng)態(tài)圖片提示效果實(shí)例
- JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片顯示描述層的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片變亮其他變暗效果
- Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例
- jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過預(yù)覽圖片大圖效果的方法
相關(guān)文章
jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能示例
這篇文章主要介紹了jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery中trigger()方法用法,實(shí)例分析了trigger()方法的功能、定義及觸發(fā)匹配元素指定類型事件的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery獲取當(dāng)前日期的方法,涉及針對(duì)日期時(shí)間的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄褂胘Query和ajax代替iframe的方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
本篇文章主要是對(duì)jquery.cookie的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
jQuery動(dòng)態(tài)修改字體大小的方法【測(cè)試可用】
這篇文章主要介紹了jQuery動(dòng)態(tài)修改字體大小的方法,涉及jQuery針對(duì)頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09
上周發(fā)布了‘jquery開發(fā)的數(shù)獨(dú)游戲’，下載量很多評(píng)論的人很少。近期會(huì)將主要的開發(fā)思路整理出來與大家交流，非常希望與大家通過這個(gè)例子共同探討和學(xué)習(xí)。2010-11-11
Jquery選擇器簡明版?Jquery選擇器實(shí)用版
最近需要用jquery獲取一些dom數(shù)據(jù)的操作，發(fā)現(xiàn)jquery的選擇器非常強(qiáng)大，很方便進(jìn)行一些dom操作，下面就專門針對(duì)這塊內(nèi)容做個(gè)簡單的介紹,需要的朋友可以參考下2023-05-05
jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見元素有效，通過本文給大家介紹jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用，感興趣的朋友一起學(xué)習(xí)吧2015-12-12