Ousland
侠客
侠客
  • UID67
  • 粉丝10
  • 关注0
  • 发帖数38
  • 社区居民
  • 阅读:2394
  • 回复:1

第五周作业 2014-08-15 崔景宇

楼主#
更多 发布于:2014-08-15 23:24
图片延时加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片延迟加载</title>
</head>
<body>
<div id="images"></div>
 
<script src="../jquery/jquery-1.11.0.min.js"></script>
<script>
// 构建图片列表
var html = []
for (var i=0; i< 10; i++) {
    html.push('<p><img data-src="image/'+(i%5)+'.jpg?'+i+'" width="560" height="305"></p>')
}
 
$('div').html(html.join(''))
 
</script>
<script type="text/javascript">
(lazyload = function(window, jQuery) {
    if (window.timedo) {
        window.clearTimeout(window.timedo);
    }
    var $img = jQuery("img[data-src]");
    if ($img.length <= 0) {
        wlog("图片全部加载完成.");
        return false;
    }
    window.timedo = window.setTimeout(function() {
        var $windowTop = jQuery(window).scrollTop();
        var length = $img.length;
        $img.each(function(index) {
            var $imgTop = $(this).offset().top - $(this).height()*1.9;
            if ($imgTop <= $windowTop) {
                $(this).attr("src", $(this).attr("data-src")).removeAttr("data-src");
                length--;
            }
        });
        wlog('当前还有',length,'张图片未加载!');
    }, 300);
})(window, $);
 
$(window).bind("scroll", function() {
    if (false === lazyload(window, $)) {
        wlog("解除绑定.");
        $(this).unbind("scroll");
    }
});
 
function wlog() {
    var queryStr = window.location.search;
    if (queryStr.match("debug")) {
        var info = [];
        info = info.concat.apply(info, arguments);
        if (!info) return;
        console.info.apply(console, info);
    }
}
</script>
</body>
</html>



{} == false
false首先会被转成0;
然后{}会valueOf,但会转成Object {}
所以会toString便会等于[object Object] = NaN
NaN和任何数字比较都是false
所以最后结果是false;



作用域的理解 : 当使用var 定义变量时,变量就会被封闭到它所在的空间.
当使用一个变量时,我理解为向上冒泡查找,所以demo2能找到demo里的变量而demo()
无法找到demo1里的变量.

图片:1.gif


闭包的理解:demo2,demo3可以使用demo的变量,正常情况下,function demo在调用完成后内存会释放,但因为它内部存在一个闭包,所以内存不会被释放,内部的变量会被保留下来.
function demo( ){
     var a = 1;
     var demo2 = function(){
        console.info(a++);  
    }   
    return demo2;
}
 
var test = demo();
 
test();
test();
test();
 
//内存没有被释放, a最后会等于3;




原型和原型链:
我个人理解:
原型是一个对象初始化时所携带的属性和方法,本身就是一个对象(因为只有对象才具备属性和方法),
原型链是寻找这个对象属性和方法的线索.


正常情况下 数组,数字,字符串本身不是对象,所以他们本身不具备也不能设置属性和方法.
但是他们的原型Array,Number,String均是继承的Object,所以他们 "又" 是对象.
所以为他们的原型设置属性和方法,初始化后,他们便可以调用到这些属性和方法.


只有function才拥有prototype 因为数字,数组,字符串不是对象,不具备成为原型的条件.
又因为原型的设置 应在于 "初始化之前";


a = {} 实质上等于 a = new Object


我觉得prototype本身就是为面向对象设计的,所以理所当然的只有function才具备使用 prototype的条件,
而且必须在 "new function" 关键词之前使用;
因为"new"之后,这个function本身变为了一个对象,也便不再具备prototype.
毕竟 Obj.XXX就能设置属性和方法,也没必要使用prototype.


图片:2.gif





以上就是我的理解,应用比较少,理解比较肤浅.
喜欢0
潘雪鹏
管理员
管理员
  • UID3
  • 粉丝9
  • 关注0
  • 发帖数168
  • 社区居民
沙发#
发布于:2014-08-16 16:26
很厉害啊

返回顶部