jquery-lazyload源码阅读疑难点笔记

 

1.懒加载挂载在jquery原型,新建的jquery对象都可用;
2.scrollTop():返回或设置匹配元素的滚动条的垂直位置。
   3.innerheight: 返回窗口的文档显示区的高度。
   4.$.extend($.expr[":"]:$.expr是什么?自定义伪类。
5.if (settings.skip_invisible && !$this.is(":visible"))中is是什么?
   is() 方法用于查看选择的元素是否匹配选择器。语法:$(selector).is(selectorElement,function(index,element));
   selectorElement    必须。选择器表达式,根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true,否则返回 false;
6.trigger() 方法触发被选元素的指定事件类型。语法:$(selector).trigger(event,[param1,param2,...])
   event    必需。规定指定元素要触发的事件。
7.jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象
   语法:$.extend( target [, object1 ] [, objectN ] )
8.$self.one("appear", function() 在此定义一个一次执行函数,并绑定在命名为appear的事件上。
  注意:1)如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。
            2) 如果多个对象具有相同的属性,则后者会覆盖前者的属性值。
9.$("img")为一个get的方法,是读取标签为"img"元素的属性及设置相应的属性;
   $("<img/>")为一个set的方法,是建立一个新的标签元素"img"并赋予相应标签相应的属性
10.isNaN() 函数用于检查其参数是否是非数字值。
    返回值:如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false。
11.img srcset 属性
   以最合适的src去匹配不同屏幕(高分屏低分屏如Retina;大屏小屏)。使用如下:
   <img src="source.jpg" width="100%"
   srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">
12.poster 属性指定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。<video poster="URL">
13.jQuery resize() 方法
    当调整浏览器窗口大小时,发生 resize 事件。resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
    语法:触发被选元素的 resize 事件:$(selector).resize()
         添加函数到 resize 事件:$(selector).resize(function);
14.img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。
15.video加载前的显示图片
    语法:<video poster="URL">
16.$window.off("resize.lazyload").bind("resize.lazyload", function() {update();});
解:
resize.lazyload指resize加了命名空间的特殊事件;

  

  

摘抄他人的:
1,用图片提前占位
placeholder : “img/grey.gif”,
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
2,载入使用何种效果
effect : “fadeIn”,
参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
3,提前开始加载
threshold : 200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
4,事件触发时才加载
event : “click”,
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5,对某容器中的图片实现效果
container: $(”#container”),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6,图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
  

  

posted @ 2020-12-03 15:09  进击中的前端攻城狮  阅读(38)  评论(0编辑  收藏  举报