• 技术文档
  • 专业的网站建设公司
  • 020-39182790

技术文档

您现在的位置:首页 > 服务支持 > 技术文档
网站中给图片实现懒加载的方法
作者:织晶客服部 发布于:2020/6/12 10:37:35 点击量: 来源:织晶网络

大部分网站,都会给网站首页和部分文章页面添加一个懒加载效果,从而减少一次性向服务器进行大量请求,前提是同一网页中有大量的图片调用。

懒加载:首先将图片的src链接设为同一张图,并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。

顾名思义,简单理解就是 当页面打开,首先所有数据引进来的图片先不显示,所有图先加载自己指定的某一张图片,一般动态图片效果更有体验性, 然后真正路径图片一个一个显示到页面,从而达到懒加载效果。

优点:懒加载能防止页面一次性向服务器响应大量请求导致服务器响应慢,防止页面卡顿或崩溃等问题。


下面,就给大家讲解下给网站添加懒加载教程

其实就是将图片src赋值为一张指定的图片,当用户滚动滚动条到可视区域图片时候,再去加载真正的图片。

css代码可以自行定义,没有特殊的要求。

HTML代码:

< img  src="指定的图片路径"  data-src="最终要显示的图片路径" />

< img  src="指定的图片路径"  data-src="最终要显示的图片路径" />

在img标签中,把原本src指向的图片路径改为指定的一张图, 在img标签中加上data-src 将他指向最终要显示的图

src 为路径

data-src 为自定义属性


JS代码:

< script>

 //函数绑定在 scroll 事件上,当页面滚动时,避免函数被高频触发,

 function throttle(fn, delay, atleast) {

//进行去抖处理

 var timeout = null,

 startTime = new Date();

return function() {

var curTime = new Date();

clearTimeout(timeout);

            if(curTime - startTime >= atleast) {

                fn();

                startTime = curTime;

            }else {

                timeout = setTimeout(fn, delay);

            }

        }

    }

    function lazyload() {

        var images = document.getElementsByTagName('img');

        var len    = images.length;

        //存储图片加载到的位置,避免每次都从第一张图片开始遍历       

        var n      = 0;

        return function() {

            var seeHeight = document.documentElement.clientHeight;

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            for(var i = n; i < len; i++) {

                if(images[i].offsetTop < seeHeight + scrollTop) {

                    if(images[i].getAttribute('src') === '指定的图片路径') {

                     images[i].src = images[i].getAttribute('data-src');

                    }

                n = n + 1;

                 }

            }

        }

    }

    var loadImages = lazyload();

    //初始化首页的页面图片

    loadImages();

    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);

  //函数节流(throttle)与函数去抖(debounce)处理,

    //500ms 的延迟,和 1000ms 的间隔,当超过 1000ms 未触发该函数,则立即执行该函数,不然则延迟 500ms 执行该函数

< /script>


备注:使用时,把< img  < /script> < /script>等标记中的空格去掉,避免使用不了。



上一篇:网站开发中常见的数据库类型有哪些?

下一篇:网站安全策略是什么?