懒加载_懒加载下拉框 - CSDN
懒加载 订阅
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。Web应用程序做的最多就是和后台数据库交互,而查询数据库是种非常耗时的过程。当数据库里记录过多时,查询优化更显得尤为重要。为了解决这种问题,有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后,查询的记录会放在缓存中。当用户再次查询时,系统会首先从缓存中读取,如果缓存中没有,再查询数据库。缓存技术在一定程度上提升了系统性能,但是当数据量过大时,缓存就不太合适了。因为内存容量有限,把过多的数据放在内存中,会影响电脑性能。而另一种技术,懒加载可以解决这种问题。 展开全文
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。Web应用程序做的最多就是和后台数据库交互,而查询数据库是种非常耗时的过程。当数据库里记录过多时,查询优化更显得尤为重要。为了解决这种问题,有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后,查询的记录会放在缓存中。当用户再次查询时,系统会首先从缓存中读取,如果缓存中没有,再查询数据库。缓存技术在一定程度上提升了系统性能,但是当数据量过大时,缓存就不太合适了。因为内存容量有限,把过多的数据放在内存中,会影响电脑性能。而另一种技术,懒加载可以解决这种问题。
信息
外文名
Load On Demand
效    果
最大程度减少服务器端的资源耗用
中文名
懒加载
背    景
系统的瓶颈常在于系统的响应速度
懒加载技术简介
懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。
收起全文
  • 懒加载 懒加载

    2019-12-17 10:54:19
    懒加载也就是延迟加载。 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径...

    懒加载也就是延迟加载。

    具体表现为:

    当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。

    好处:

    很多页面,内容很丰富,页面很长,图片较多。比如瀑布流,图片数量多且大,如果一次性加载完毕,用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。

    技术原理:

    页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的就是先在页面中把所有的图片统一使用一张占位图进行占位,把真正的路径存在元素的“pic-url”(自定义命名)属性里,要用的时候就取出来。

    实现步骤:

    1、不要将图片地址放到src属性中,而是放到其它属性中。

    2、页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。

    3、在滚动事件中重复判断图片是否进入视野,如果进入,则将data-original属性中的值取出存放到src属性中。

     

    图片加载技术-懒加载和预加载

     

    预加载也就是提前加载图片

    具体表现为:

    当用户需要查看时可直接从本地缓存中渲染

    好处:

    图片预先加载到本地中,访问者便可享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

    实现预加载的方法:

    方法一:用CSS和JavaScript实现预加载

    方法二:仅使用javascript实现预加载

    方法三:使用Ajax实现预加载

    懒加载和预加载的区别

    两种技术行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    展开全文
  • 懒加载的3种实现方式

    千次阅读 2019-03-19 21:41:07
    性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。 节约带宽:这个不需要解释。 通常,我们在html中展示图片,会有两种方式: img 标签 css background-image ...
        

    优势

    1. 性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。
    2. 节约带宽:这个不需要解释。

    通常,我们在html中展示图片,会有两种方式:

    1. img 标签
    2. css background-image

    img的懒加载实现

    img有两种方式实现懒加载:

    1. 事件监听(scroll、resize、orientationChange)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>event</title>
        <style>
            img {
                background: #F1F1FA;
                width: 400px;
                height: 300px;
                display: block;
                margin: 10px auto;
                border: 0;
            }
        </style>
    </head>
    <body>
        <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> -->
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var lazyloadImages = document.querySelectorAll("img.lazy");    
                var lazyloadThrottleTimeout;
                
                function lazyload () {
                    if(lazyloadThrottleTimeout) {
                        clearTimeout(lazyloadThrottleTimeout);
                    }    
                    
                    lazyloadThrottleTimeout = setTimeout(function() {
                        var scrollTop = window.pageYOffset;
                        lazyloadImages.forEach(function(img) {
                            if(img.offsetTop < (window.innerHeight + scrollTop)) {
                                img.src = img.dataset.src;
                                img.classList.remove('lazy');
                            }
                        });
                        if(lazyloadImages.length == 0) {
                            document.removeEventListener("scroll", lazyload);
                            window.removeEventListener("resize", lazyload);
                            window.removeEventListener("orientationChange", lazyload);
                        }
                    }, 20);
                }
                
                document.addEventListener("scroll", lazyload);
                window.addEventListener("resize", lazyload);
                window.addEventListener("orientationChange", lazyload);
            });
        </script>
    </body>
    </html>
    1. Intersection Observer(兼容性问题)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>observer</title>
        <style>
            img {
                background: #F1F1FA;
                width: 400px;
                height: 300px;
                display: block;
                margin: 10px auto;
                border: 0;
            }
        </style>
    </head>
    <body>
        <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
        <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> -->
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
        <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var lazyloadImages = document.querySelectorAll(".lazy");
                var imageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            var image = entry.target;
                            image.src = image.dataset.src;
                            image.classList.remove("lazy");
                            imageObserver.unobserve(image);
                        }
                    });
                });
                lazyloadImages.forEach(function(image) {
                    imageObserver.observe(image);
                });
            });
        </script>
    </body>
    </html>

    background-image的实现

    background-image的实现跟img的原理基本是一样的,区别是在对class的处理上:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>background</title>
        <style>
            body {
                margin: 0;
            }
            .bg {
                height: 200px;
            }
            #bg-image.lazy {
                background-image: none;
                background-color: #F1F1FA;
            }
            #bg-image {
                background-image: url("https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300");
                background-size: 100%;
            }
        </style>
    </head>
    <body>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <div id="bg-image" class="bg lazy"></div>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var lazyloadImages = document.querySelectorAll(".lazy");
                var imageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            var image = entry.target;
                            image.classList.remove("lazy");
                            imageObserver.unobserve(image);
                        }
                    });
                });
                lazyloadImages.forEach(function(image) {
                    imageObserver.observe(image);
                });
            });
        </script>
    </body>
    </html>

    渐进式懒加载

    渐进式懒加载,指的是存在降级处理,通常html形式如下:

    <a href="full.jpg" class="progressive replace">
      <img src="tiny.jpg" class="preview" alt="image" />
    </a>

    这样的代码会有2个好处:

    1. 如果js执行失败,可以点击预览
    2. 大小与实际图一致的占位data URI,避免reflow

    最终的代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>progressive</title>
        <style>
            a.progressive {
                position: relative;
                display: block;
                overflow: hidden;
                outline: none;
            }
            a.progressive:not(.replace) {
                cursor: default;
            }
            a.progressive img {
                display: block;
                width: 100%;
                max-width: none;
                height: auto;
                border: 0 none;
            }
            a.progressive img.preview {
                filter: blur(2vw);
                transform: scale(1.05);
            }
            a.progressive img.reveal {
                position: absolute;
                left: 0;
                top: 0;
                will-change: transform, opacity;
                animation: reveal 1s ease-out;
            }
            @keyframes reveal {
                0% {transform: scale(1.05); opacity: 0;}
                100% {transform: scale(1); opacity: 1;}
            }
        </style>
    </head>
    <body>
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5big.jpg 1600w" class="progressive replace">
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNzAK/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/9sAQwEKCwsODQ4cEBAcOygiKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/8AAEQgABQAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A5yC3e2S3gM7OEQHdgA57VTuLAPqUoaUk7yM7R2BPSiivS5VN8stjmk2ldGVM3lyshG7bxk0UUV4skk2jdN2P/9k=" class="preview" alt="palm trees" />
        </a>
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature2.jpg" class="progressive replace">
            <img src="http://lorempixel.com/20/15/nature/2/" class="preview" alt="sunset" />
        </a>
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature3.jpg" class="progressive replace">
            <img src="http://lorempixel.com/20/15/nature/3/" class="preview" alt="tide" />
        </a>
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5big.jpg 1600w" class="progressive replace">
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNzAK/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/9sAQwEKCwsODQ4cEBAcOygiKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/8AAEQgABQAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A5yC3e2S3gM7OEQHdgA57VTuLAPqUoaUk7yM7R2BPSiivS5VN8stjmk2ldGVM3lyshG7bxk0UUV4skk2jdN2P/9k=" class="preview" alt="palm trees" />
        </a>
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature2.jpg" class="progressive replace">
            <img src="http://lorempixel.com/20/15/nature/2/" class="preview" alt="sunset" />
        </a>
        <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature3.jpg" class="progressive replace">
            <img src="http://lorempixel.com/20/15/nature/3/" class="preview" alt="tide" />
        </a>
        <script>
            window.addEventListener('load', function() {
                var pItem = document.getElementsByClassName('progressive replace'), timer;
    
                window.addEventListener('scroll', scroller, false);
                window.addEventListener('resize', scroller, false);
                inView();
    
                function scroller(e) {
                    timer = timer || setTimeout(function() {
                        timer = null;
                        requestAnimationFrame(inView);
                    }, 300);
                }
    
                function inView() {
                    var scrollTop = window.pageYOffset;
                    var innerHeight = window.innerHeight;
                    var p = 0;
                    while (p < pItem.length) {
                        var offsetTop = pItem[p].offsetTop;
                        if (offsetTop < (scrollTop + innerHeight)) {
                            loadFullImage(pItem[p]);
                            pItem[p].classList.remove('replace');
                        }
                        else p++;
                    }
                }
    
    
                function loadFullImage(item) {
                    var img = new Image();
                    if (item.dataset) {
                        img.srcset = item.dataset.srcset || '';
                        img.sizes = item.dataset.sizes || '';
                    }
                    img.src = item.href;
                    img.className = 'reveal';
                    if (img.complete) addImg();
                    else img.onload = addImg;
    
                    function addImg() {
                        item.addEventListener('click', function(e) { e.preventDefault(); }, false);
                        item.appendChild(img).addEventListener('animationend', function(e) {
                            var pImg = item.querySelector('img.preview');
                            if (pImg) {
                                e.target.alt = pImg.alt || '';
                                item.removeChild(pImg);
                                e.target.classList.remove('reveal');
                            }
                        });
                    }
    
                }
    
            }, false);
        </script>
    </body>
    </html>

    现成库

    推荐下面这个库,使用非常简单:https://www.npmjs.com/package/lozad

    展开全文
  • js实现图片懒加载原理

    万次阅读 多人点赞 2019-06-01 16:58:48
    有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站...为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。...

    有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。

    为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。

    vue项目中的打包,是把html、css、js进行打包,还有图片压缩。但是打包时把css和js都分成了几部分,这样就不至于一个css和就是文件非常大。也是优化性能的一种方式。
    效果动图如下:
    在这里插入图片描述

    进入正题------懒加载

    1.懒加载原理

    一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的src属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。

    2.懒加载思路及实现

    实现懒加载有四个步骤,如下:
    1.加载loading图片
    2.判断哪些图片要加载【重点】
    3.隐形加载图片
    4.替换真图片

    1.加载loading图片是在html部分就实现的,代码如下:
    在这里插入图片描述
    2.如何判断图片进入可视区域是关键。
    引用网友的一张图,可以很清楚的看出可视区域。
    在这里插入图片描述
    如上图所示,让在浏览器可视区域的图片显示,可视区域外的不显示,所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了,就是说当top-height<=s+h时,图片在可视区。
    这里介绍下几个API函数:
    页可见区域宽: document.body.clientWidth;
    网页可见区域高: document.body.clientHeight;
    网页可见区域宽: document.body.offsetWidth (包括边线的宽);
    网页可见区域高: document.body.offsetHeight (包括边线的宽);
    网页正文全文宽: document.body.scrollWidth;
    网页正文全文高: document.body.scrollHeight;
    网页被卷去的高: document.body.scrollTop;
    网页被卷去的左: document.body.scrollLeft;
    网页正文部分上: window.screenTop;
    网页正文部分左: window.screenLeft;
    屏幕分辨率的高: window.screen.height;
    屏幕分辨率的宽: window.screen.width;
    屏幕可用工作区高度: window.screen.availHeight;

    HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离。
    window.innerHeight:浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。

    具体实现的js代码为:

    // onload是等所有的资源文件加载完毕以后再绑定事件
    window.onload = function(){
    	// 获取图片列表,即img标签列表
    	var imgs = document.querySelectorAll('img');
    
    	// 获取到浏览器顶部的距离
    	function getTop(e){
    		return e.offsetTop;
    	}
    
    	// 懒加载实现
    	function lazyload(imgs){
    		// 可视区域高度
    		var h = window.innerHeight;
    		//滚动区域高度
    		var s = document.documentElement.scrollTop || document.body.scrollTop;
    		for(var i=0;i<imgs.length;i++){
    			//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
    			if ((h+s)>getTop(imgs[i])) {
    				// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
    				(function(i){
    					setTimeout(function(){
    						// 不加立即执行函数i会等于9
    						// 隐形加载图片或其他资源,
    						//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
    						var temp = new Image();
    						temp.src = imgs[i].getAttribute('data-src');//只会请求一次
    						// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
    						temp.onload = function(){
    							// 获取自定义属性data-src,用真图片替换假图片
    							imgs[i].src = imgs[i].getAttribute('data-src')
    						}
    					},2000)
    				})(i)
    			}
    		}
    	}
    	lazyload(imgs);
    
    	// 滚屏函数
    	window.onscroll =function(){
    		lazyload(imgs);
    	}
    }
    

    效果如下:
    在这里插入图片描述
    随着鼠标向下滚动,其余图片也逐渐显示并发起请求。
    在这里插入图片描述
    效果动图如下:
    在这里插入图片描述

    每天进步一点点、充实一点点、加油!Girl!

    展开全文
  • 懒加载的原理及实现

    万次阅读 多人点赞 2017-06-26 22:44:19
    懒加载的原理 原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src...

    懒加载的原理

    • 原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
    • 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

    代码实现

    • 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内,首先我们写一个函数判断元素是否出现在可视范围内:
    function isVisible($node){
        var winH = $(window).height(),
            scrollTop = $(window).scrollTop(),
            offSetTop = $(window).offSet().top;
        if (offSetTop < winH + scrollTop) {
            return true;
        } else {
            return false;
        }
    }
    • 再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:
    $(window).on("scroll", function{
        if (isVisible($node)){
            console.log(true);
        }
    })
    • 我们已经很接近了,现在我们要做的是,让元素只在第一次被检查到时打印true,之后就不再打印了
    var hasShowed = false;
    $(window).on("sroll",function{
        if (hasShowed) {
            return;
        } else {
            if (isVisible($node)) {
                hasShowed = !hasShowed;
                console.log(true);
            }
        }
    })

    咦,我们好像已经实现了懒加载。
    下面是我的实现:

    无限滚动

    利用懒加载和AJAX,我们还可以实现无限滚动查看时间线的效果,下面是我的实现:
    - 展示代码

    回到顶部

    利用懒加载的原理,我们还可以实现在滚动页面一段距离后,出现回到顶部按钮的这种效果,下面是我的实现
    - 展示代码

    展开全文
  • mybatis 的懒加载原理

    万次阅读 2016-10-21 23:13:57
    mybatis 的懒加载过程挺复杂的,涉及到的东西有很多,包括:配置文件的解析、mapper 文件的解析、sql 语句的映射、结果集的映射、懒加载等。简单的说一下 mybatis 框架是干什么的我用我自己的话来总结一下 mybatis ...
  • 这是是一个封装好的图片懒加载的方法,为图片加上了一个渐现的动画(一开始拿js写的渐现,后来发现效果太差改用css来写的动画,渐现效果确实不错,不得不说c3的动画确实比js的流畅太多了,直接将方法和动画复制过去...
  • 懒加载和预加载

    2020-09-16 20:09:29
    懒加载和预加载 懒加载 场景:对于图片过多的页面,为了加快页面加载速度,需要将页面内未出现的可视区域内的图片先不做加载,等到滚动可视区域后再去加载。 原理:img标签的src属性用来表示图片的URL,当这个属性值...
  • 懒加载和预加载的实现

    千次阅读 2018-03-05 17:18:19
    懒加载和预加载的实现提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以及实现懒加载什么是懒加载懒加载也就是延迟加载; 当访问一个页面时,先将...
  • Java中的懒加载

    2020-09-17 17:47:57
    最近在引用别人定义的实体类时,发现了在字段中定义了懒加载,于是对此有了一些了解和认识 使用原因 在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也...
  • js实现图片懒加载

    千次阅读 2018-02-22 08:56:03
    如果是一个图片列表页,虽然好看,但是相关图片的加载要耗费非常长的时间,等待图片一格一格的加载,实在让人抓狂,如何优化此类页面呢?
  • 图片懒加载的实现

    千次阅读 2019-03-16 16:44:52
    1. dataset ...dataset自定义属性的格式:data-xx;前面的data-是固定的,后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。 举个例子: &...
  • VUE路由懒加载及组件懒加载 一、为什么要使用路由懒加载  为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的...
  • vue路由懒加载

    万次阅读 2018-01-19 12:08:54
    路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。 这里蓝色部分是webpack自动分割出来的,...
  • 一、什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。 二、为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容...
  • JavaScript中的预加载和懒加载

    千次阅读 2018-11-16 14:46:12
    JavaScript中的预加载和懒加载 预加载和懒加载的使用场景不同,可以先了解一下浏览器机制,有助于理解两者的原理。在网页中合理使用预加载和懒加载有效地减少用户的等待时间,提高用户体验。 目录 ...
  • 前端优化——懒加载

    千次阅读 2019-08-28 18:18:35
    懒加载 1.什么是懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使...
  • MyBatis的懒加载(延迟加载)

    千次阅读 2018-10-23 19:23:00
    什么是懒加载 所谓懒加载就是按需加载。 例如: 对象模型就是一个订单中持有一个对用户的引用。 当查询订单信息时,暂时不加载用户信息。就延迟加载(懒加载)。   什么情况下才能使用懒加载呢? 上面的...
  • 什么是懒加载?默认情况,如果我们spring的bean的作用域是单例模式(singleton)的话,那么在spring容器初始化的时候,spring也提前对bean进行了实例化,创建了bean的实例。但是,如果我们想让bean对象在其需要的时候...
  • 懒加载作为初始化类的成员变量一种优化,应该避免采用。因为任何一种优化也可能降低性能。对于懒加载会增加被懒加载对象的访问成本。 为了避免类的循环初始化,或者当某些类成员初始化很耗时且使用懒加载可以有效的...
  • 关于图片懒加载问题 - 原理和实现

    千次阅读 多人点赞 2020-08-04 14:38:43
    1.什么是图片懒加载 图片懒加载就是鼠标滑动到哪里,图片加载到哪里。总的来说,一般页面打开,会同时加载页面所有的图片,如果页面的图片请求太多会造成很卡很慢的现象,为了避免这一现象,利用懒加载图片的方法...
1 2 3 4 5 ... 20
收藏数 88,470
精华内容 35,388
关键字:

懒加载