Question

我正在实现一个网页，其中我想对图像应用延迟加载，以便在加载页面时，一些图像（例如20个图像）立即加载，其他图像将加载滚动。在滚动上加载100张图片后，它会在按钮上询问“查看更多”按钮点击下方后滚动，如facebook。

以下是滚动时加载图像的代码。

<head id="Head1" runat="server">
<title></title>
<script src="../Script/jquery.js" type="text/javascript"></script>
<script src="../Script/jquery.lazyload.js" type="text/javascript"></script>
<style type="text/css">
    .lazy
    {
        /*display: none;*/
    }
</style>
<script type="text/javascript">
    /*===================================*/
    $(function () {
        $("img.lazy").lazyload({
            effect: "fadeIn",
            effectSpeed: 5000,
            failure_limit: 10,
            enableThrottle: false,
            threshold: 50,
            failure_limit: 0,
            skip_invisible: true
        });
    });
    /*=====================*/
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" class="container" style="width: 100%; height: 500px; overflow: 
visible;
    padding: 5px; margin: 0 auto;">
    <asp:DataList ID="dtl_ShowGallery" runat="server" DataKeyField="ImageId" 
GridLines="None"
        AlternatingItemStyle-CssClass="dtl_rowStyle" CssClass="dtl_rowStyle" 
AlternatingItemStyle-VerticalAlign="Middle"
        RepeatDirection="Vertical" RepeatColumns="5">
        <AlternatingItemStyle CssClass="dtl_rowStyle" Font-Size="8pt" 
VerticalAlign="Middle" />
        <HeaderStyle Font-Size="8pt" />
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <img height="150px" width="180px" class="lazy" alt="No Image" 
data-original='<%# ((DataBinder.Eval(Container.DataItem, "ImageName").ToString() != 
"") ? "../Images/Gallery/" + DataBinder.Eval(Container.DataItem, 
"ImageName").ToString() :"../Images/Gallery/ImageNotAvailable.jpg")%>'
                src="../Script/lazyloader/loader/loading.gif" />
        </ItemTemplate>
    </asp:DataList>
</div>
</form>
</body>

以上代码显示滚动时的结果和加载图像。我怎样才能实现我想要的任何东西？请为上述问题找到解决方案。谢谢。

如何实现延迟加载，因为Facebook在滚动时加载其内容

0 个答案: