关于lazyload延迟加载图片分页问题？在线等

zhanglong_longlong 2015-10-20 11:46:21

关于lazyload延迟加载图片分页问题，请教下图片分页的时候，分页的图片不能延迟加载问题，有知道解决的吗？

...全文

279 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhanglong_longlong 2015-10-20

打赏
举报

引用 1 楼 ajianchina 的回复:

你是在第一页的时候就将图片全列出来了吗？如果是这样的话，就是被浏览器缓存了，后页就不在延迟了。

不是第一页就全列出来，是ajax分页的，无刷新，所以有什么办法吗？

ajianchina 2015-10-20

打赏
举报

你是在第一页的时候就将图片全列出来了吗？如果是这样的话，就是被浏览器缓存了，后页就不在延迟了。

zhanglong_longlong 2015-10-20

打赏
举报

引用 13 楼 starfd 的回复:

而且你是拼接html的方式，我的例子是直接将字符串转化成了jquery对象你可以在html拼接结束后
var $html=$(html);
$html.find('img').lazyload();
$('').append($html);

Thanks

娃都会打酱油了 2015-10-20

打赏
举报

而且你是拼接html的方式，我的例子是直接将字符串转化成了jquery对象你可以在html拼接结束后

var $html=$(html);
$html.find('img').lazyload();
$('').append($html);

娃都会打酱油了 2015-10-20

打赏
举报

不能直接写src为你要加载的图片，要用其它默认图片替换，然后才可以

zhanglong_longlong 2015-10-20

打赏
举报

引用 9 楼 starfd 的回复:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript" src="Script/jquery-1.8.0.js"></script>

    <script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>

    <script type="text/javascript">

        $().ready(function () {

            var maxPic = 17;//总共17张图片

            var perCall = 5;//每次点击加载5张

            var nowPicIndex = 1;//当前应当加载的是第几张



            $('#bt_Load').click(function () {

                for (i = 0; i < perCall; i++) {

                    if (nowPicIndex <= maxPic) {

                        var $img = $('<img src="/Image/ce_teacher_3.png" />');

                        $img.attr("data-original", "/tmpPic/" + nowPicIndex + ".jpg");

                        nowPicIndex++;

                        $('#dv_container').append($img);

                        $img.lazyload({

                            effect: "fadeIn"

                        });

                    }

                    else {

                        break;

                    }

                }

            });

        });

    </script>

    <style>

        img {

            display: block;

        }

    </style>

</head>

<body>

    <input type="button" id="bt_Load" value="Get" />

    <div id="dv_container"></div>

</body>

</html>

这样测试过可以，当然由于直接这样demo会有问题，图片默认在显示区域后，就不会触发对应的事件……

这样好像不行

娃都会打酱油了 2015-10-20

打赏
举报

然后改下js源代码，这样可以保证图片在外面加载时也可以立刻load

/* Force initial check if images should appear. */
//$(window).load(function() {
     update();
//});

娃都会打酱油了 2015-10-20

打赏
举报

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="Script/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            var maxPic = 17;//总共17张图片
            var perCall = 5;//每次点击加载5张
            var nowPicIndex = 1;//当前应当加载的是第几张

            $('#bt_Load').click(function () {
                for (i = 0; i < perCall; i++) {
                    if (nowPicIndex <= maxPic) {
                        var $img = $('<img src="/Image/ce_teacher_3.png" />');
                        $img.attr("data-original", "/tmpPic/" + nowPicIndex + ".jpg");
                        nowPicIndex++;
                        $('#dv_container').append($img);
                        $img.lazyload({
                            effect: "fadeIn"
                        });
                    }
                    else {
                        break;
                    }
                }
            });
        });
    </script>
    <style>
        img {
            display: block;
        }
    </style>
</head>
<body>
    <input type="button" id="bt_Load" value="Get" />
    <div id="dv_container"></div>
</body>
</html>

这样测试过可以，当然由于直接这样demo会有问题，图片默认在显示区域后，就不会触发对应的事件……

zhanglong_longlong 2015-10-20