标签：拼接 win ble bsp original init 滚动事件 att ice
懒加载实质：
1.不加载全部图片
2.首先显示在页面中的图，首先进行加载
3.当屏幕发生滚动的时候，判断图片是否进入用户视野，来决定图片是否加载
编写步骤
1.首先，不要将图片地址放到src属性中，而是放到其它属性（data-original）中
2.页面加载完成后，根据scrollTop判断图片是否在用户视野内，如果在，则将data-original属性中的值取出放到src中
3.在屏幕滚动事件中，重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出放到src中
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title></title> <style media="screen"> * { margin: 0; padding: 0; } .container { width: 80%; margin: 0 auto; border: 1px solid blue; overflow: hidden; } .container section { float: left; width: 48%; margin: 20px 1%; text-align: center; background-color: rgb(210, 227, 209); border-radius: 5px; overflow: hidden; } .container section img { width: 100%; } .container section p { padding: 10px 0; } </style> </head> <body> <div class="container"></div> </body> <script src="./js/jquery-2.2.3.js" charset="utf-8"></script> <script type="text/javascript"> $(function () { $.get(‘http://localhost:8888/data/data1.json‘, function (data) { data = data.scenery; for (let item of data) { // 创建节点并拼接 // 不要把图片的真实地址放在src属性中，而是放到其它属性中，目的是不发起网络请求 $(`<section> <img src="./imgs/placeholder.png" data-original="${item.img_url}" alt="" /> <p>${item.title}</p> </section>`).appendTo(‘.container‘); } initImgsSrc(); }); // 获取屏幕高度 var screenHeight = $(window).outerHeight(); // 当加载完成之后，把需要显示的图片地址放到src中 function initImgsSrc() { // 获取所有图片的scrllTop $(‘section img‘).each(function (i, v) { // 在获取图片offsetTop的时候，需要等图片加载完成之后，否则获取的图片offsetTop不是加载之后的值 this.onload = function () { var $this = $(this); // 图片距离顶部的值 var imgScrollTop = $this.offset().top; // 判断是否在屏幕范围内容 if (imgScrollTop < screenHeight) { // 从data-original中取出值，并放到src属性中 $this.attr({ src: $this.attr(‘data-original‘) }); } }; }); } // 监听滚动 // 在屏幕滚动的过程中判断图片是否进入用户视野 window.onscroll = function () { var scrollValue = screenHeight + $(window).scrollTop(); $(‘section img‘).each(function (i, v) { var $this = $(this); // 图片距离顶部的值 var imgScrollTop = $this.offset().top; if (imgScrollTop <= scrollValue) { $this.attr({ src: $this.attr(‘data-original‘) }); } }); }; }); </script> </html>
server.js代码部分：
require(‘express‘)().get(‘*‘, function (req, res) { res.sendFile(__dirname + req.path); }).listen(8888, function () { console.log(‘启动成功‘); });
标签：拼接 win ble bsp original init 滚动事件 att ice
原文地址：http://www.cnblogs.com/fyh123/p/6103575.html
