Cara Membuat jQuery DIV Auto Load and Refresh

Membuat jQuery auto load dan refresh secara otomatis dari server dan menampilkan halaman konten dengan cepat tentu sangat membantu para pengguna website karena mereka tidak perlu merefresh halam browser. Dalam tutorial ini, kita akan membuat jquery load secara otomatis dan merefresh DIV dengan interval berkala. Tutorial memuat otomatis jQuery ini akan membantu menyegarkan konten dengan feed terbaru, untuk memuat spanduk iklan acak, dll.

jQuery Auto Load

Sangat sedikit baris kode yang diperlukan untuk membuat jQuery load otomatis. berikut script jQuery load otomatis,

<html>
	<head>
		<title></title>
		<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
		<script>
		$(document).ready(function(){
			setInterval(function(){
				$("#screen").load('banners.php')
		    }, 2000);
		});
		</script>

		<style>
			.banner {width:600px; text-align:center; margin:0 auto; position: relative; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; padding:50px 20px;}
			.banner:before {content: ""; position: absolute; top: 0; right: 0;border-width: 0 24px 24px 0; border-style: solid; border-color:#F0F0F0 #fff; -webkit-border-radius: 0px 0 0px 5px; -moz-border-radius: 0px 0 0px 5px; border-radius: 0px 0 0px 5px;}
			#screen {width:100%;color: #555;"Century Gothic",CenturyGothic,AppleGothic,sans-serif;line-height:45px;}
			.txt-title {font-size:2em;}
			.txt-subtitle {font-size:1.2em;}
		</style>
	</head>
	<body>
		
		<div id="screen"></div>

	</body>
</html>

File PHP banners.php diminta melalui jQuery ajax menggunakan metode load. File ini berisi script HTML. Salah satu warna tersebut dipilih menggunakan rand array PHP untuk mengubah latar belakang banner dan dimuat ke DIV yang ditentukan. Berikut script PHP untuk  jQuery auto load dan refresh secara otomatis,

<html>
	<head>
		<title></title>
	</head>
	<body>
		<?php
			$bg_array = array("#CEED9D","#ECED9D","#EDCF9D","#EC9CA7","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC");
			$bg = array_rand($bg_array,1);
		?>
		<div class="banner" style="background-color:<?php echo $bg_array[$bg];?>;" >
			<div class="txt-title">jQuery DIV Auto Load Refresh</div>
			<div class="txt-subtitle">This Banner auto loads and refreshes every 2 seconds.</div>
		</div>
	</body>
</html>

Event load jQuery ini terjadi setiap 2 detik untuk memperbarui banner secara berkala. Selain menggunakan data array statis kita bisa menghubungkan DB untuk memuat div dengan data dinamis.
Oke itulah tadi pembahasan saya tentang Cara Membuat jQuery DIV Auto Load and Refresh semoga bermanfaat.