How to Use AJAX for On-Demand Loading and ajax for loading

Source: Internet
Author: User

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>

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.