欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手机网站实现图片惰性加载 手机网页加载

程序员文章站 2023-12-25 16:48:15
...

什么是图片惰性加载呢?

顾名思义,惰性指的是我们只将用户视野范围内(浏览器窗口的可视区域)的图片加载,而用户视野范围外的图片先不加载,当用户看到这些图片时再做加载。

这样做的好处在于哪里呢?

1、用户访问速度上升了,浏览器的加载进度条很快就加载完毕。

2、节省用户流量。

那么如何实现呢?

我们需要解决两个问题:① 如何知道用户是否能看见这张图片?② 如何让看不到的图片不加载,而在需要的时候再去加载?

先解决第一个问题:如何知道用户是否能看见这张图片?

首先需要获取三个值,这些都可以通过javascript获取。

①浏览器窗口的高度 windowHeight

②页面滚动的距离    windowPageY

③图片距离页面顶部的距离 imgTop 

那么:

if(imgTop >= windowPageY && imgTop <= (windowPageY+windowHeight)){
  //图片可见
}

关于上面的条件判断,相信你仔细思考就能看明白。

解决第二个问题:如何让看不到的图片不加载,而在需要的时候再去加载?

所有图片元素的src值先设置为一个很小的图片或者一张“加载中”的图片,而它的真实属性放置在一个自定义属性中如:

<img dataimg="真实大图.png" src="小图.png">

这样浏览器只会去加载小图,而不会去加载大图,而当你所有图片都用同一张小图的时候,这张小图只需要加载一次,所以速度非常快。

当这张图片需要加载了,那么我们只需要将原先放置在自定义属性中的图片地址放置到img标签额src属性中就可以了,接下来浏览器就会去请求并加载这张图片:

<img dataimg="真实大图.png" src="真实大图.png">

 ok,基本原理就是这样,代码细节就不赘述了,直接贴代码。

lazyload.js

手机网站实现图片惰性加载 手机网页加载
            
    
    博客分类: 移动互联网 wap 手机网站JqueryjqujquAJAX 手机网页加载 
  1 (function(){
  2  /**
  3  * 功能:图片惰性加载
  4  * @author haunghm
  5  * @version 1.0.0
  6  * @dependencies jquery 或者 zepto
  7  */
  8 var lazyLoad = {
  9     
 10     init: function() {
 11         var that = this;
 12         that.onerrorImgUrl = "./images/grey.png";//图片加载失败用什么图片替换
 13         that.srcStore      = "dataimg";   //图片真实地址存放的自定义属性
 14         that.class         = "lazy";      //惰性加载的图片需要添加的class
 15         that.sensitivity   = 50;           //该值越小,惰性越强(加载越少)      
 16         
 17         minScroll = 5,
 18         slowScrollTime = 200,
 19         ios = navigator.appVersion.match(/(iPhone\sOS)\s([\d_]+)/),
 20         isIos = ios && !0 || !1,
 21         isoVersion = isIos && ios[2].split("_");
 22     
 23         isoVersion = isoVersion && parseFloat(isoVersion.length > 1 ? isoVersion.splice(0, 2).join(".") : isoVersion[0], 10),
 24         isIos = that.isPhone = isIos && isoVersion < 6;
 25         
 26         if (isIos) {
 27             
 28             var startSyAndTime,
 29             setTimeOut;
 30             $(window).on("touchstart",function() {
 31                 startSyAndTime = {
 32                     sy: window.scrollY,
 33                     time: Date.now()
 34                 },
 35                 setTimeOut && clearTimeout(setTimeOut)
 36             }).on("touchend",function(e) {
 37                 if (e && e.changedTouches) {
 38                     var subtractionY = Math.abs(window.scrollY - startSyAndTime.sy);
 39                     if (subtractionY > minScroll) {
 40                         var subtractionTime = Date.now() - startSyAndTime.time;
 41                         setTimeOut = setTimeout(function() {
 42                             that.changeimg(),
 43                             startSyAndTime = {},
 44                             clearTimeout(setTimeOut),
 45                             setTimeOut = null
 46                         },
 47                         subtractionTime > slowScrollTime ? 0: 200)
 48                     }
 49                 } else {
 50                     that.changeimg();
 51                 }
 52             }).on("touchcancel", function() {
 53                 setTimeOut && clearTimeout(setTimeOut),
 54                 startSyAndTime = {}
 55             })
 56         } else {
 57             $(window).on("scroll", function() {
 58                 that.changeimg();
 59             });
 60         }
 61         setTimeout(function() {
 62             that.trigger();                
 63         },90);
 64         
 65     },
 66     trigger: function() {
 67         var that = this;
 68         eventType = that.isPhone && "touchend" || "scroll";
 69         that.imglist = $('img.'+that.class+'');
 70         $(window).trigger(eventType);
 71     },
 72     changeimg: function() {
 73         function loadYesOrno(img) {
 74             var windowPageYOffset = window.pageYOffset,
 75             windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight,
 76             imgOffsetTop = img.offset().top;
 77             return imgOffsetTop >= windowPageYOffset && imgOffsetTop - that.sensitivity <= windowPageYOffsetAddHeight;
 78         }
 79         function loadImg(img, index) {
 80             
 81             var imgUrl = img.attr(that.srcStore);
 82             img.attr("src", imgUrl);
 83             img[0].onload || (img[0].onload = function() {
 84                 $(this).removeClass(that.class).removeAttr(that.srcStore),
 85                 that.imglist[index] = null,
 86                 this.onerror = this.onload = null
 87             },
 88             img[0].onerror = function() {
 89                 this.src = that.onerrorImgUrl,
 90                 $(this).removeClass(that.class).removeAttr(that.srcStore),
 91                 that.imglist[index] = null,
 92                 this.onerror = this.onload = null
 93             })
 94         }
 95         var that = this;
 96         that.imglist.each(function(index, val) {
 97             if (!val) return;
 98             var img = $(val);
 99             if (!loadYesOrno(img)) return;
100             if (!img.attr(that.srcStore)) return;
101             loadImg(img, index);
102         })
103         
104     }
105 };
106 lazyLoad.init();
107     
108 }());
手机网站实现图片惰性加载 手机网页加载
            
    
    博客分类: 移动互联网 wap 手机网站JqueryjqujquAJAX 手机网页加载 

如何使用这个脚本呢?

HTML

手机网站实现图片惰性加载 手机网页加载
            
    
    博客分类: 移动互联网 wap 手机网站JqueryjqujquAJAX 手机网页加载 
<!DOCTYPE html>
<html>
<head>
<title>图片惰性演示例子</title>
</head>
<body>
<img class="lazy" dataimg="images/change01.jpg" src="./grey.png">
<img class="lazy" dataimg="images/change02.jpg" src="./grey.png">
<img class="lazy" dataimg="images/change03.jpg" src="./grey.png">
<img class="lazy" dataimg="images/change04.jpg" src="./grey.png">
<img class="lazy" dataimg="images/change05.jpg" src="./grey.png">
<img class="lazy" dataimg="images/change06.jpg" src="./grey.png">
</body>

<script src="http://libs.baidu.com/zepto/1.0rc/zepto.min.js"></script>
<script src="./lazyload.js"></script>

</html>
手机网站实现图片惰性加载 手机网页加载
            
    
    博客分类: 移动互联网 wap 手机网站JqueryjqujquAJAX 手机网页加载 

就像上面的代码一样,很简单。只要在页面底部载入jquery或者zepto(如果你不想依赖这两个库,也很简单,可以改造一下代码,毕竟在移动端不需要处理很多兼容性问题)。然后载入lazyload.js这个脚本。

并按照一下规则来书写你的img标签

<img class="lazy" dataimg="真实大图.png" src="小图.png">

注意事项:图片最好都用样式定义高度,否则图片的高度默认为0,就上面的例子来讲,所有img标签都挤在一起,全部在第一屏,导致程序认为它们都应该加载,就看不到效果了。

好了,高潮和结局终于同时来了。我始终认为demo也需要有赏心悦目的感觉。

相关标签: 手机网页加载

上一篇:

下一篇: