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张可见区域外的图片,以避免出现这个问题.