1. 程式人生 > >JQuery滾動載入

JQuery滾動載入

1.html

<div class="container">
        <div class="top">
            <span>正在熱映</span>
            <span class="more">更多></span>
        </div>
        <div class="item">
            <ul class="ul">
                <div class="y_loading_easy" id="J_loadmore">努力載入中...</div>
            </ul>
        </div>

    </div>

2.JS程式碼如下:
```
 $(function () {
 //滾動載入
    var stop = true;
    var start = 0;
    $.ajaxSetup({async:false});
    function getData(url){
        $.ajax({
            type:"get",//跨域訪問時只能用get
            url:url,//要訪問的api地址
            dataType:"jsonp",
            success:function(data){
                var d = data.subjects;
                var html = '';
                for(i in d){
                    html += '<li>'
                    +'<span class="img-span"><img src="'+d[i].images.large+'">'+'</span>'
                    +'<p class="name">'+d[i].title+'</p>'
                    +'</li>'
                    start++;
                }
                stop = true;


                $('.ul').append(html);
            },
        });
    }
    getData('https://api.douban.com/v2/movie/in_theaters');
    $(window).scroll(function(){
        var url = "https://api.douban.com/v2/movie/in_theaters?start="+start+"&count=20";
        var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
        if($(document).height() <= totalheight +120){
            if(stop == true){
                stop = false;
                $('#j_loadmore').addClass('enabled');
                getData(url);
            }
        }
    })
})

相關推薦

JQuery滾動載入

1.html<div class="container">        <div class="top">            <span>正在熱映</span>            <span class="mor

JQuery滾動載入更多資料例項

載入更多資料,這是現在網頁的基本需求,由於本人菜鳥,一直都不會,現在有時間了好好研究了下,以豆瓣API為例: <div class="container"> <div class="top">

jquery滾動載入資料

我們瀏覽有些網頁的時候,當拉動瀏覽器的滾動條時到頁底時,頁面會繼續自動載入更多內容供使用者瀏覽。這種技術我暫且稱它為滾屏載入技術,我們發現很多網站用到這種技術,例如新浪微博、QQ空間等。 jquery實現滾動載入資料的方式類似於 HTML 程式碼   複製 <!DOCTYPE=html

使用jquery-weui製作的下拉重新整理和滾動載入

一、前期檔案中引入weui.min.css,jquery-weui.min.css,jquery-2.1.4.js,jquery-weui.min.js,fastclick.js這些檔案。 二、html程式碼 <head> <meta charset="utf-8

jquery weui實現多tab非同步滾動載入更多

<html class="pixel-ratio-1"> <head> <title>多tab實現ajax滾動載入更多</title> <meta charset="utf-8"> <

jquery weui ajax滾動載入更多

手機端使用jquery weui製作ajax滾動載入更多。 程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

jquery 滾動條分頁載入資料

廢話不多說  直接擼 1.引入兩個js檔案,必須jquery第一個 <script src="jquery.min.js"/> <script src="jquery.infinit

jquery.scrollLoading實現圖片滾動載入

一、關於滾動顯屏載入 常常會有這樣子的頁面,內容很豐富,頁面很長,圖片較多。比如說淘寶商城頁面。頁面圖片數量多,而且比較大時。要是頁面載入就一次性載入完畢,需要使用者等半天。所以針對這種情況,目前很流行的做法就是滾動動態載入,顯示螢幕之外的圖片預設是不載入的,隨著頁面的

Jquery滾動監聽和附加導航

jquery 導航 滾動監聽初學jquery,多多指教導航思路:設定nav導航的類。設定索引值。點擊導航內容,導航的索引和內容的索引一一對應。點擊導航欄,內容滑動一段距離。監聽: 1.滑動內容文檔時,索引值變動。 2.導航對應的索引所在內容高亮。下面是代碼<!--導航-->$(doc

jquery滾動條插件nanoscroller的應用

o-c lan lac size nbsp 查詢 get rep ... 默認的滾動條的樣式,各個版本的兼容性不是很好, 推薦一款jQuery 插件nanoscroller ,可以自定義滾動條的樣式。 應用: 1.引入樣式 nanoscroller.css <link

jQuery滾動指定位置

query document log tlist 指定 nim blog gpo body $(document).ready(function() { $("#scroll").click(function() { $(‘html, body‘).an

【轉載】jquery 滾動條插件jquery.slimscroll.js

query 推薦 page 默認 tor post w3c 設置 scrip 轉載http://www.w3cways.com/1910.html jquery.slimscroll.js插件是一個支持把內容放在一個盒子裏面,固定一個高度,超出的則使用滾動。 jquery.

Vue使用jQuery ajax載入資料頁面無顯示解決方法

無資料程式碼為  <script> new Vue({ el:"#demo", data:{list:find()} }) function find(){ var ss; $.ajax(

jQuery動態載入和移除select下拉選項

jQuery動態載入和移除select下拉選項 我是個後端開發,工作需要在做select 聯動效果的時候要動態追加選項,實現追加後,發現修改選項的時候,下級選單會一直追加。 話不多數,直接乾貨 html程式碼示例: <select name="name" id="id" o

Js及Jquery頁面載入後執行的函式

JavaScript 方式一:window.onload: 當一個文件完全下載到瀏覽器中時,才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的,也就是說頁面上的所有元素載入完畢才會執行。這種情況對編寫功能性程式碼非常有利,因為無需考慮載入的次序。 w

vue--使用滑鼠滾動載入資料

關於用滑鼠滾動到某個位置我們就去載入資料,這樣的場景與業務需求現在越來越常見,現在來分析下《vue.js 實戰》中作者的一個解決策略:             1. 設定一個標誌位用來判斷資料是否在載入中   &nbs

IE8中jQuery.load()載入頁面不顯示的原因

一、jQuery.load()   jQuery.load(url,[data],[callback])通過Ajax非同步請求載入伺服器中的資料,並把資料放到指定元素中。 url :請求伺服器的地址 data :可選項,請求時傳送的資料 callback :可選項,請求成功後的回撥

vue中實現滾動載入

需要安裝該外掛: cnpm i vue-infinite-scroll -S   // 生產依賴 --save 等價 在main.js檔案進行引入進來 data中設定 busy:false <

微信小程式實現滾動載入更多

微信小程式實現滾動載入更多 1.需要用到的元件和api scroll-view(可滾動檢視區域) wx.showToast(OBJECT)顯示訊息提示窗 2.需要用到的屬性  

簡單實現滾動載入資料庫資料

<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>測試