圖片延遲加載

前端網站的圖片延時加載技術

1、導入JQuery的js和JQuery延遲加載的js

<scripttype="text/javascript"src="js/jquery.js"></script>

<scripttype="text/javascript"src="js/jquery.lazyload.js"></script>

2、延遲加載的Js

<scripttype="text/javascript">

var Img = "images/lazyload.gif";

jQuery.noConflict()(function(){

jQuery.noConflict()("img").lazyload({placeholder:Img,effect:"fadeIn"});

});

</script>

3、完整的代碼

<!DOCTYPE html>
<html>
	<head>
		<!--聲明當前頁面的編碼集charset=GBK，gb2312(中文編碼)，UTF-8(國際編碼)-->
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<meta name="Keywords" content="關鍵詞,關鍵詞">
		<meta name="description" content="">		

		<!--css,js-->
		<!--css: 層疊樣式表，一件美麗的外衣-->
		<!--內嵌樣式-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微軟雅黑";color:#666;background:#f9f9f9;}
			img{border:0;display:block;}
			/*以“.”開頭的css樣式稱之爲  類樣式*/
			.top{width:1000px;height:66px;margin:0 auto;}
			.top .logo{float:left;}
			.top .qq{float:right;height:66px;line-height:66px;font-size:26px;
				font-weight:bold;
			}
			.top .qq span{color:#ff5f25;}
			/*圖片部分*/
			.pic{width:900px;margin:30px auto;}

			.pic ul li{list-style:none;float:left;
				/*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);*/
				margin-right:12px;margin-bottom:10px;
			}
			.pic ul li p {width:288px;height:35px;text-align:center;line-height:35px;background:#fff;}
			
			.pic ul li a:hover img{opacity:0.8;filter:alpha(opacity=80);}

		</style>

		<!--第一步-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<!--lazyload-->
		<script type="text/javascript" src="js/jquery.lazyload.js"></script>
		<script type="text/javascript">
			var Img = "images/lazyload.gif";
			jQuery.noConflict()(function(){
				jQuery.noConflict()("img").lazyload({placeholder:Img,effect:"fadeIn"});
			});	
		</script>
		
	</head>
<body>
	

	<!--div:層，容器，盒子-->
	<div class="pic">
		<!--無序列表-->
		<ul>
			<li>
				<a href="#">
					<img src="images/1.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/2.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/3.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/4.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/5.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/6.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/7.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/8.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/9.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/10.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/11.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/12.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/13.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/14.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>

			<li>
				<a href="#">
					<img src="images/1.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/2.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/3.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/4.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/5.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/6.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/7.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/8.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/9.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/10.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/11.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/12.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/13.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/14.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/1.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/2.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/3.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/4.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/5.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/6.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/7.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/8.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/9.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/10.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/11.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/12.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/13.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/14.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/1.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/2.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/3.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/4.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/5.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/6.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/7.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/8.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/9.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/10.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/11.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/12.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/13.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>
			<li>
				<a href="#">
					<img src="images/14.jpg" alt="" width="288" height="180"/>
				</a>
				<p>
					綠叢小花精美攝影
				</p>
			</li>


		</ul>
	</div>

</body>
</html>

老虎_tiger

發佈了45 篇原創文章 · 獲贊 12 · 訪問量 15萬+

私信關注

圖片延遲加載

EXCEL中下拉菜單中添加新選項或者刪除選項

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

同事使用 insert into select 遷移數據，開開心心上線，上線後被公司開除！

Git使用經驗總結5-修改提交信息

Python 爬蟲：Spring Boot 反爬蟲的成功案例

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Git使用經驗總結4-撤回上一次本地提交

Java中止線程的方式

壓榨數據庫的真實處理速度

國內SaaS遇冷？未來企業服務賽道是否還有機會？

（十三）、ZooKeeper 選主流程

JavaScript分享新浪微博、QQ空間、騰訊微博

強勢團隊的五大特性

Jenkins部署新項目

圖片延遲加載

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結