te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - simplest way to lazy load long <ul> with many <li>s - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - simplest way to lazy load long <ul> with many <li>s - Stack Overflow

    javascript - simplest way to lazy load long <ul> with many <li>s - Stack Overflow

    programmeradmin3浏览0评论

    What is the simplest way to lazy load a long list ( ) of many (65+) list items?

    By lazy load I mean only load the list items that are visible in the viewport. Once a list item is visible in the viewport then load it.

    I've looked at many infinite scrolling and lazy load plugins, but none of them seem to be just for a really long list.

    They all seems to be for a really long list of images, or a list that has pagination with previous and next buttons.

    My HTML is just a list of text with many list items like so:

    <ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
<ul>

    I would greatly appreciate any and all help in writing the javascript or jquery so that only those that are currently in the viewport are loaded and then rest are hidden and then when teh user scrolls and others e into view in the viewport, they are loaded. And, if possible, display a <div>loading...</div> while those are loading.

    The part that I really do not know how to do is to load or show only what is visible in the viewport in the beginning and then one could load, with jQuery's .load(), or show, with jQuery's .show() those that are in the viewport. But I don't know how to tell what is in the viewport and what is not.

    I would greatly appreciate any and all help with this!

    Thanks in Advance!

    What is the simplest way to lazy load a long list ( ) of many (65+) list items?

    By lazy load I mean only load the list items that are visible in the viewport. Once a list item is visible in the viewport then load it.

    I've looked at many infinite scrolling and lazy load plugins, but none of them seem to be just for a really long list.

    They all seems to be for a really long list of images, or a list that has pagination with previous and next buttons.

    My HTML is just a list of text with many list items like so:

    <ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
<ul>

    I would greatly appreciate any and all help in writing the javascript or jquery so that only those that are currently in the viewport are loaded and then rest are hidden and then when teh user scrolls and others e into view in the viewport, they are loaded. And, if possible, display a <div>loading...</div> while those are loading.

    The part that I really do not know how to do is to load or show only what is visible in the viewport in the beginning and then one could load, with jQuery's .load(), or show, with jQuery's .show() those that are in the viewport. But I don't know how to tell what is in the viewport and what is not.

    I would greatly appreciate any and all help with this!

    Thanks in Advance!

    • javascript
    • jquery
    • load
    • lazy-loading
    • infinite-scroll
    Share Improve this question edited Feb 4, 2020 at 15:03 Stephan 43.1k66 gold badges244 silver badges340 bronze badges asked May 29, 2013 at 0:18 irfan mirirfan mir 4032 gold badges5 silver badges10 bronze badges 2
    • Are you trying to do this to save page loading time or just for the effect? – James Commented May 29, 2013 at 0:29
    • @james just for effect. But, I would like for it to not weigh down the page as much as possible. – irfan mir Commented May 29, 2013 at 0:32
    Add a ment  | 

    2 Answers 2

    Reset to default 11

    As you've said this is just for effect here is a nice little solution I found a while ago.

    Let's assume your markup is like this

    <ul id="yourlist">
<li>list item</li> ... etc

    1) Slice the first twenty elements and hide the rest.

    $("#yourlist li").slice(20).hide();

    2) We set two variables. Min and Max (the difference being 20 at all times). This will load the next 20 in the list. It then checks for window scroll and if the window height es within 400 px of the bottom of the page (or div if you change the code) then it will run the next function which is to slice the min to max and fadeIn those items. Then it counts on so that it's ready to run the next time. 

    var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#yourlist li").slice(mincount,maxcount).fadeIn(1200);

mincount = mincount+20;
maxcount = maxcount+20;

}
});

    Here is a JS FIDDLE OF IT WORKING http://jsfiddle/ymyx8/1/ with some background colours on the li's so you can see it loading

    Edit: to add loading DIV

    As per your question in the ments: The issue is that nothing is actually 'loading'. Usually when you see this occurring it's because an AJAX call is made and the loading is shown and hidden on the success function. The effect can be mimicked using a delay like so:

    JS FIDDLE http://jsfiddle/ymyx8/3/

    You could also to it on callback functions on the fadeOut etc.

    There is a bug with the example above on some browsers/systems (looking at you Apple) in which the code does not work if you don't have enough li items to trigger the page to scroll (eg. 7). Since there's no scrollbar the code does nothing.

    Here's a possibly hacky fix...

    http://jsfiddle/7meuchoy/6/

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论