Jquery PlugIn for lazy loading items.

最新推荐文章于 2023-07-04 15:35:31 发布

diandian82

最新推荐文章于 2023-07-04 15:35:31 发布

阅读量332

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/diandian82/article/details/77196928

版权

Javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏


  
  
   
   
    
    //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-οnscrοll="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');
        });