jQuery Mobile Page Data Batch Loading

Add-ons

2026-07-26 01:08 6 次浏览 • 0 次下载 2.1KB

Plugin Description: This feature is frequently used when developing mobile shopping mall frontends. For example, when a product detail page contains large images, loading everything at once can cause slow loading and lag. This simple plugin supports loading data in multiple batches, making it easy to implement incremental data loading.

Last Updated: 2019-12-15 22:00:14

Usage

After including jQuery and main.js, you can add the API request method inside the loading() method. Here is an example:

function loading() { // Dynamically load data
    totalHeight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); // Browser viewport height plus scroll bar height
    if ($(document).height() - 15 <= totalHeight) { // Start dynamically loading data when the document height is less than or equal to the total height
        flag++;
        console.log("Page data load number " + flag + " ~");
        var str = `
               <div  onclick="lineClick(this)">Caviar Launches iPhone 11 Pro/Max Christmas Star Edition, Priced at Up to 900,000 Yuan</div>
               <div  onclick="lineClick(this)">Android Home>Huawei MediaPad M6 Tablet Launched in Europe, Starting at 2,723 Yuan: Kirin 980, No GMS, Preinstalled with EMUI10</div>
               <div  onclick="lineClick(this)">JD.com's Double 12 Xiaomi Shopping Guide: Redmi K30 and RedmiBook 13 Full-Screen Products Now Available</div>
               <div  onclick="lineClick(this)">Domestic Model 3 Deliveries Imminent as Tesla Stock Rises for Three Consecutive Trading Days</div>
               <div  onclick="lineClick(this)">Duowan Game Forum Announces Closure and Migration at the End of the Year</div>
               <div  onclick="lineClick(this)">Taobao Officially Launches 5G Live Streaming for Double 12, With Image Clarity That Reveals Product Texture Details</div>
               <div  onclick="lineClick(this)">Digital Home>Smart Home Appliances: Xiaomi Youpin Lists Qingping Bluetooth Alarm Clock Featuring an Alarm, Temperature and Humidity Monitoring, and Night Light in One Device</div>
               <div  onclick="lineClick(this)">Jia Yueting's Bankruptcy Restructuring Faces Opposition; Debt Group Says It Harms the Interests of Most Creditors</div>
           `;
        $("#container").append(str);
        // The following is an example of requesting backend data. You can modify it according to your needs. My project's backend uses PHP.
        // $.ajax({
        //     url: "http://localhost/layui-test/php/main.php",
        //     async: false,
        //     success: function (obj) {
        //         if (obj) {
        //             var datalist = JSON.parse(obj);
        //             console.log(datalist);
        //             var str = "";
        //             for (var i = 0; i < datalist.length; i++) {
        //                 str += `<div >` + datalist[i][4] + `</div>`;
        //             }
        //             $("#container").append(str);
        //         }
        //     }
        // });
    }
}