Question

我有一个在图库中加载图片的功能。在整个网站中，它会加载最后20个图像，然后当用户向下滚动时，它会加载另外20个并使用无限滚动代码。

但是，在一个页面上这不起作用，我很困惑为什么不这样做。

我已将问题代码缩小到这个范围：

function getEachBoardPins($id,$limit=false)
{

    $sql    = "SELECT 
                    *
                FROM
                    pins
                WHERE
                    board_id = $id
                ORDER BY time DESC";
    if($limit)
        $sql .=" LIMIT $limit" ;
    $query  = $this->db->query($sql);
    return $query->result();
}

这将在图库中加载每个图像。一些画廊的图像超过1000张，因此需要永久加载。

通过在第一行中将“$ limit = false”值更改为true，仅渲染上次上传的图像。

任何人都可以帮助我或指出我的方向，以便我能解决它吗？

感谢。

编辑：

无限滚动码：

$(function(){

    // alert($('.pin_item').length);

    var $alpha = $('#alpha');
    $alpha.imagesLoaded( function(){
        $alpha.masonry({
            itemSelector: '.pin_item',
            isFitWidth: true,
            isAnimatedFromBottom: true

            //isAnimated: true
        });
    });
    $alpha.infinitescroll({
        navSelector  : '#page-nav',    // selector for the paged navigation
        nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.pin_item',     // selector for all items you'll retrieve

        loading: {

            finishedMsg: 'No more pages to load.',
            img: '<?php echo site_url(); ?>/application/assets/images/ajax_loader_blue.gif'
        }
    },

    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $alpha.masonry( 'appended', $newElems, true );
            $("a.act_uncomment").hide();
            $(".enter_comm").hide();
            //Examples of how to assign the ColorBox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox({scrolling:false,transition:"elastic"});
            $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });

        });
    }
);

});

Answer 1

从所有mysql经验限制应该设置为一个整数，因此只返回那么多结果的最大值。尝试为该查询添加数字限制

Answer 2

你这样做的方式，无论你输入什么号码，都只会返回最后$limit个记录。如果您要查询更多图像，您将返回已检索的所有记录以及其他记录（例如，如果您只是增加该数字）。

此外，不是将$limit作为布尔/整数传递（混合数据类型不是好习惯），也许你应该将它作为数字传递。例如：

function getEachBoardPins($id, $start=0, $numrows=20)
{
    $sql = "SELECT * 
            FROM pins 
            WHERE board_id = {$id}
            ORDER BY time DESC
            LIMIT {$start},{$numrows}
            ";
    $query  = $this->db->query($sql);
    return $query->result();
}

我假设您在将变量传递给函数之前对其进行了清理。

另一种方法是传入检索到的最后一条记录的ID。这样，您可以准确地选择上次停止的位置，以防自上次刷新数据后添加了新图像。

无限滚动的SQL限制问题

2 个答案: