這里延遲加載的意思是，拖動滾動條時，在圖片出現在瀏覽器顯示區域后才加載顯示。在這之前全部圖片都由一張圖片代替。節省流量，減輕服務器負擔。
請用鼠標或者鍵盤方向鍵使頁面向下滾動，注意圖片的變化。本特效沒有使用專門的圖片延遲加載插件，只需要一小段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 >何問起</a><a >網頁特效</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實現圖片延遲加載 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
