实现并完善图片延迟加载效果。要求:
1)实现基本效果
2)通过在地址栏添加参数?debug后,可以打印日志到控制台
3)日志包括当前未加装的图片数,以及图片全部加载完成后的提示信息
4)滚动条的每一次滚动,仅执行一次图片检查操作
5)图片完全加载后,接触滚动事件
<script>
// 构建图片列表
var html = []
for (var i=0; i< 10; i++) {
html.push(‘<p><img src=”” data-src=”./image/’+(i%5)+’.jpg?’+i+’_’+ Math.random()+'” width=”560″ height=”305″></p>’)
}
$(‘div’).html(html.join(”))
</script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
function URL() {
    this.GetRequest = function GetRequest() {
       var url = location.search; //获取url中"?"符后的字串
       var theRequest = new Object();
       if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for(var i = 0; i < strs.length; i ++) {
             theRequest[strs<span style="font-style: italic;">.split("=")[0]]=unescape(strs<span style="font-style: italic;">.split("=")[1]);
          }
       }
       return theRequest;
    }
}
  
function lazyload(exrp) {
    var p_element = $(exrp);
    var length_total = p_element.find('img').length;
    var length_replace = 0;
    var bind_starus = 0;
    var last, diff;
    this.replace_src = function(){
        var visible = {
            'top' : $(window).scrollTop(),
            'right' : $(window).width() + $(window).scrollLeft(),
            'down' : $(window).height() + $(window).scrollTop(),
            'left' : $(window).scrollLeft()
        }
          
        var imgs = p_element.find('img[src=""]').each(function (i){
            var img = {
                'top' : $(this).offset().top,
                'right' : $(this).width() + $(this).offset().left,
                'down' : $(this).height() + $(this).offset().top,
                'left' : $(this).offset().left
            }
            var where_y = img.down > visible.top && img.top < visible.down;
            var where_x = img.left < visible.right && img.right > visible.left;
              
            if (where_y && where_x) {
                $(this).attr("src", $(this).attr("data-src"));
                length_replace++;
                bind_starus = 1;
            }
        });
          
        if (imgs == 'undefined' || imgs.length == 0  ){
            $(window).unbind('scroll');
            bind_starus = 0;
        }
        debug();
    }
      
    var debug = function (){
        var Request = new Object();
        var url = new URL();
        if (url.GetRequest() == 'undefined' || url.GetRequest()['debug'] < 1 && url.GetRequest()['debug'].toUpperCase() == 'FALSE') {
            return false;
        }
        console.log('一共有: ' + length_total + ' 张图片');
        console.log('已经替换: ' + length_replace + ' 张图片');
        console.log('滚动事件绑定状态: ' + (bind_starus ? '绑定' : '解除'));
    }
      
    this.bind_scroll = function(){
        //lazyload.replace_src();
        $(window).scroll(function(){
            lazyload.replace_src();
        });
    }
}
  
  
var last, diff;
var lazyload = new lazyload('p');
lazyload.bind_scroll();</span></span>

2、逐步分析  ({} == false) 在执行相等比较是的类型转换步骤

复制代码

1
2
3
4
5
{}是一个对象,与其他类型比较转为原始值,{} 先通过 {}.valueOf() 类型为 object, 不是原始值继续 {}.toString() 结果为 字符串 "[object Object]"
false 是 bool类型,与其他类型比较转为 整形, Number(false) 结果为 整形 0
现在就是 字符串 "[object Object]" 与 整形 0 比较
字符串 与 整形比较 转为整形, Number("[object Object]") 结果为 Number类型 NaN
NaN 与 0  不等,返回 false

3、用图或文字,描述自己对作用域、作用域链、原型、原型链、基于原型的继承、执行环境、闭包等概念的理解。

Tagged on:

8 thoughts on “第五周作业-JavaScript | FLY_DF

发表评论