Jquery实现图片懒加载

基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载,对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。

1、修改 HTML 代码中需要延迟加载的 img 标签

<img class="lazy" data-original="example.jpg">

2、在网页底部添加如下代码

这里主要是引入jquery.jsjquery.lazyload.js,并初始化lazyload的图片显示样式。

<script src="jquery.lazyload.min.js"></script>
<script>
    //js出始化lazyload并设置图片显示方式
    $(function() {$("img.lazy").lazyload({effect: "fadeIn", threshold: 200});});
    //pjax开启后的pjax回调
    $(document).on('pjax:complete', function() {
            $("img.lazy").lazyload({
            effect: "fadeIn",
            threshold: 200
        });
    });
</script>

注意事项:

需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。

前端开发

jsonp获取百度接口实现百度智能提示搜索框

2021-12-13 9:00:13

前端开发

添加谷歌翻译到你的网站

2022-2-16 17:01:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索