0

我有一个在图库中加载图像的功能。在整个站点中，它会加载最后 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;
            });

        });
    }
);

});
4

2 回答 2

0

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

于 2013-05-22T19:37:50.670 回答
0

你这样做的方式，无论你传入什么数字，都只会返回最后$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。这样，如果自上次刷新数据以来添加了新图像，您可以准确地从上次中断的地方继续。

于 2013-05-22T19:41:26.107 回答