jquery图片懒加载效果

1.要引入jquery

2.要引入underscore.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jquery 图片懒加载</title>    
 6 </head>
 7 <body>
 8     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540274976&di=68061376df27b04b7032d09fb79bd9b9&src=http://media-cdn.tripadvisor.com/media/photo-s/01/10/83/ba/reflection-of-matterhorn.jpg">
 9     <P>1111111111111111111111111111111111111111111111</P>
10     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540274976&di=68061376df27b04b7032d09fb79bd9b9&src=http://media-cdn.tripadvisor.com/media/photo-s/01/10/83/ba/reflection-of-matterhorn.jpg">
11     <P>sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;</P>
12     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540274976&di=68061376df27b04b7032d09fb79bd9b9&src=http://media-cdn.tripadvisor.com/media/photo-s/01/10/83/ba/reflection-of-matterhorn.jpg">
13     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540274976&di=68061376df27b04b7032d09fb79bd9b9&src=http://media-cdn.tripadvisor.com/media/photo-s/01/10/83/ba/reflection-of-matterhorn.jpg">
14     <P>1111111111111111111111111111111111111111111111</P>
15     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540274976&di=68061376df27b04b7032d09fb79bd9b9&src=http://media-cdn.tripadvisor.com/media/photo-s/01/10/83/ba/reflection-of-matterhorn.jpg">
16     <P>sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;sssssssssssssssssssss照片，画像; 图画，图片; 影片; 情景;</P>
17     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540880384&di=feadac6ce146caec60eaeac92aca9939&imgtype=jpg&er=1&src=http%3A%2F%2Fwenwen.soso.com%2Fp%2F20100523%2F20100523163327-1276922906.jpg">
18     <img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540285716317&di=0273cbe192e5b70f71809259482f70f0&imgtype=0&src=http%3A%2F%2Fwww.27209808.hk%2Fupfile%2F2018%2F5a1321878bfa8f11ed00b09711a1929f.jpg" alt="">
19 <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
20 <script type="text/javascript" src="https://underscorejs.org/underscore.js"></script>
21 <script>
22 // 注意: 需要引入jQuery和underscore
23 $(function(){
24     // 获取window的引用:
25     var $window = $(window);
26     // 获取包含data-src属性的img，并以jQuery对象存入数组:
27     var lazyImgs = _.map($('img[data-src]').get(), function (i) {
28         return $(i);
29     });
30     // 定义事件函数:
31     var onScroll = function() {
32         // 获取页面滚动的高度:
33         var wtop = $window.scrollTop();
34         // 判断是否还有未加载的img:
35         if (lazyImgs.length > 0) {
36             // 获取可视区域高度:
37             var wheight = $window.height();
38             // 存放待删除的索引:
39             var loadedIndex = [];
40             // 循环处理数组的每个img元素:
41             _.each(lazyImgs, function ($i, index) {
42                 // 判断是否在可视范围内:
43                 if ($i.offset().top - wtop < wheight) {
44                     // 设置src属性:
45                     $i.attr('src', $i.attr('data-src'));
46                     // 添加到待删除数组:
47                     loadedIndex.unshift(index);
48                 }
49             });
50             // 删除已处理的对象:
51             _.each(loadedIndex, function (index) {
52                 lazyImgs.splice(index, 1);
53             });
54         }
55     };
56     // 绑定事件:
57     $window.scroll(onScroll);
58     // 手动触发一次:
59     onScroll();
60 })
61 </script>
62 </body>
63 </html>

 

posted @ 2018-10-24 14:09  quitpoison  阅读(1416)  评论(0)  编辑  收藏  举报