How to Use AJAX for On-Demand Loading and ajax for loading
On-Demand Loading advantages: in actual surveys, many netizens have a clear direction when visiting the website. They often search for the desired product list on the home page, if the customer loads all the homepage information and displays it to the customer upon entering the homepage, the website resources will be greatly wasted and the customer experience will be reduced, therefore, on-demand loading becomes the mainstream for today's website construction;
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> attach images as needed </title>
<Style type = "text/css">
* {Margin: 0px; padding: 0px; list-style: none ;}
Ul {
Height: auto;
Overflow: hidden;
Width: 400px;
Margin: 0 auto;
}
Li {
Width: 300px;
Height: 200px;
Border: solid 1px # ddd;
Overflow: hidden;
}
</Style>
</Head>
<Body>
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li url = "./rexiao. php">
</Li>
</Ul>
<Script type = "text/javascript" src = "jquery-1.8.3.min.js"> </script>
<Script type = "text/javascript">
// Scroll events of the bound window
$ (Window). scroll (function (){
// Traverse the element size in the Detection
$ ('Li [isLoaded! = 1] '). each (function (){
// Obtain the scroll height
Var sT = $ (window). scrollTop ();
// Obtain the height of the visible area of the window
Var cT = $ (window). height ();
// Get the offset of the element from the top of the document
Var t = $ (this). offset (). top;
// Save the current Element Object
Var curLi = $ (this );
// Detection and judgment
If (t <= sT + cT ){
// Check whether url attributes exist.
Var url = $ (this). attr ('url ');
// If any data after ajax request is sent
If (url ){
// Send ajax
$. Get ('rexiao. php', {}, function (data ){
CurLi.html (data );
Return;
})
}
// The src attribute of the modified element is displayed at this time.
Var src = $ (this). find ('img '). attr ('data-src ');
// Set
$ (This). find ('img '). attr ('src', src );
// Identify
$ (This). attr ('isloaded', '1 ');
}
})
})
// Use code to trigger a rolling event
$ (Window). trigger ('scroll ');
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
