Jquery PlugIn for lazy loading items.

最新推荐文章于 2023-03-30 17:03:35 发布

diandian82

最新推荐文章于 2023-03-30 17:03:35 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/diandian82/article/details/77196928

Javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的懒加载插件，该插件能够有效地延迟页面中某些元素的加载，直到这些元素出现在用户的可视区域内。通过这种方式，可以显著提高网页的初始加载速度并节省带宽资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//lazy load image
(function ($) {
    $.fn.onScroll = function (options) {
        var defaultOpt = {
            callback: null,
            params: null,
            reserve: 0
        };
        var opt = $.extend({}, defaultOpt, options);
        var $this = $(this);
        var _checkScreen = function(ignoreCache){
            var scrolltop = $(window).scrollTop();
            var wheight = $(window).height();
            var offsetTop = $this.offset().top;
            if (offsetTop >= scrolltop && offsetTop <= (scrolltop + wheight + (ignoreCache === true ?0:opt.reserve))) {
                if ($.isFunction(opt.callback)) {
                    opt.callback($this, opt.params);
                } else {
                    $(document).trigger(opt.callback, [$this, opt.params]);
                }
            }
        }
        $(document).on('dom.scroll', _checkScreen);
        _checkScreen(true);
    };
    $(document).on('dom.load', function () {
        $("[data-onscroll]").each(function () {
            var $this = $(this);
            $this.onScroll({
                callback: $this.attr('data-onscroll'),
                params: $this.attr('data-onscroll-params'),
                reserve: Number($this.attr('data-reserve')) || 0
            })
            $this.removeAttr("data-onscroll");
        });
    });
})(jQuery);

PlugIn for lazy loading items.

Usage:

<iframe class="shown" data-onscroll="informaScrollToEvent" data-src="<%= informaUrl %>" width="100%" frameborder="0" height="500px" style="border:1px solid #d7d7d7;"></iframe>

$(document).one('informaScrollToEvent', function (e, iframe, params) {
            var url = $(iframe).attr('data-src');
            $(iframe).attr('src', url);
            $(iframe).removeAttr('data-src');
        });