滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

<html>
<head>
<link rel="dns-prefetch" href="http://i.tq121.com.cn">
<meta charset="utf-8" />
<title>滚动加载|jquery.endless-scroll插件|使用demo</title>
<script type="text/javascript" src="http://i.tq121.com.cn/j/core.js"></script>
<script>W.css("c/core.css","c/tqzt/zhibo.css")</script>
</head>
<body>
<script>
//延时加载 jquery.endless-scroll 插件使用方法
W.use(‘j/plugs/jquery.endless-scroll.js‘,function(){
    $(document).endlessScroll({
        bottomPixels: 450,
        fireDelay: 10,
        callback: function(){
            console.log(‘又加载一次数据‘)
            $(‘.main ul‘).append($(‘.main ul‘).html());
        }
    });
})
</script>
<div class="box">
    <div class="main_box">
        <div class="main">
            <h2><i></i>
                <span>最新报道</span></h2>
            <ul>
                <li>
                    <h3>
                        <a href="http://news.weather.com.cn/2014/10/2213662.shtml" target="_blank">北京马拉松霾中跑</a>
                    </h3>
                    <i>(2014-10-19 11:05:52)</i>
                    <div class="img">
                        <p><img src="http://cms.weather.com.cn/site2/images/cn/newzt/zbzt/2014/10/19/CBE09A9C28E02076B04959FB6352847B.jpg" alt=""></p>
                    </div>
                    <div class="zhaiyao">10月19日早上,2014北京马拉松比赛开赛,18日下午18时,北京市政府已正式发布空气重污染蓝色预警。北京马拉松比赛组委会18日晚21时紧急发布温馨提示,请参赛选手根据自身情况选择参赛。当日,北京PM2.2超过300,空气重度污染。...
                        <a href="http://news.weather.com.cn/2014/10/2213662.shtml" target="_blank">[详细]</a>
                    </div>
                </li>
                <li>
                    <h3>
                        <a href="http://news.weather.com.cn/2014/10/2212568.shtml" target="_blank">17日夜间至20日京津冀局地有重度霾</a>
                    </h3>
                    <i>(2014-10-17 09:16:58)</i>
                    <div class="img">
                        <p><img src="http://cms.weather.com.cn/site2/images/cn/newzt/zbzt/2014/10/17/E80251CCE5620CFBA5FBCE8A230F88EC.jpg" alt=""></p>
                    </div>
                    <div class="zhaiyao">中国天气网讯 继10月7-11日中东部遭遇大范围雾或霾天气之后,时隔不到一周,今夜(17日)起,华北中南部、黄淮等地将再迎雾或霾天气,其中北京东南部、河北中南部、天津西部等地局地将有重度霾。20日夜间,受南下冷空气影响,上述地区雾、霾天气将自北向南逐步减弱或消散。...
                        <a href="http://news.weather.com.cn/2014/10/2212568.shtml" target="_blank">[详细]</a>
                    </div>
                </li>
                <li>
                    <h3>
                        <a href="http://news.weather.com.cn/2014/10/2212568.shtml" target="_blank">17日夜间至20日京津冀局地有重度霾</a>
                    </h3>
                    <i>(2014-10-17 09:16:58)</i>
                    <div class="img">
                        <p><img src="http://cms.weather.com.cn/site2/images/cn/newzt/zbzt/2014/10/17/E80251CCE5620CFBA5FBCE8A230F88EC.jpg" alt=""></p>
                    </div>
                    <div class="zhaiyao">中国天气网讯 继10月7-11日中东部遭遇大范围雾或霾天气之后,时隔不到一周,今夜(17日)起,华北中南部、黄淮等地将再迎雾或霾天气,其中北京东南部、河北中南部、天津西部等地局地将有重度霾。20日夜间,受南下冷空气影响,上述地区雾、霾天气将自北向南逐步减弱或消散。...
                        <a href="http://news.weather.com.cn/2014/10/2212568.shtml" target="_blank">[详细]</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
时间: 2024-10-11 10:17:57

滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo的相关文章

js加载页面使用execute_script选定加载位置

#由于js逐步加载页面,存在未显示的网页无法加载源码 from selenium import webdriver driver = webdriver.Firefox() init_element = driver.find_element_by_xpath('//a[@href="#" and @title="展开"]') driver.execute_script("return arguments[0].scrollIntoView();"

手机端页面滑动到底部加载信息

//滚动加载function scroll_load(){    var scrollBottom; //网页正文全文高-滚动条距离顶部的高度        $(document).scroll(function(){//滚动事件          scrollBottom = document.body.scrollHeight - document.body.scrollTop;          if(scrollBottom == document.body.clientHeight||

探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多

在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个基础上进行改写.今天尝试一下使用SwipeRefreshLayout配合自定义ListView实现下拉刷新.滑到底部自动加载更多的功能. 效果图如下所示,在进入页面的时候加载自动刷新,滑到底部自动加载更多,当数据已经加载完成则显示已经加载完成,,否则上拉任可继续加载 先贴一下项目结构图吧,这样可能对

Django+ajax实现页面底部加载

Django+ajax实现页面底部加载 需求:展示图片,当滚动条拖到页面底部时加载一部分图画. 问题:photo的展示使用的是django的QuerySet,对于ajax如何加载非常头痛,还专门补了一下js. 解决思路:用的取巧的办法,把photo先分页,然后ajax的load方法加载下一个页面的photo部分到当前页面来. 分页 第一步是把photo的QuerySet分页展示,我这里直接用127.0.0.1:8000/x/的url,所以在urls.py里这样写 url(r'^(?P<page>

Ajax滚动加载页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>  <m

yii2 如何在页面底部加载css和js

作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那 为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var

JQuery ajax 滚动底部加载更多

<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ Import Namespace="System.Net" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html> <script runat="

封装的图片预加载,数据加载到浏览器底部加载数据

html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <style> *{ padding:0; margin:0