이미지의 지연 로딩 및 jquery.lazyload.js의 사용 예

프로젝트에서 이미지 지연 로딩이 가끔 사용되는데, 지연 로딩의 이점은 무엇인가요?

두 가지 주요 사항이 있다고 생각합니다. 첫 번째는 큰 이미지가 많이 포함된 긴 페이지에서 이미지 로딩을 지연시키는 것이 페이지 로딩 속도를 높일 수 있다는 것입니다. 두 번째는 서버의 부하를 줄이는 데 도움이 된다는 것입니다.

다음에서는 일반적으로 사용되는 지연 로딩 플러그인 jquery.lazyload.js와 지연 로딩 플러그인 구현 방법을 소개합니다.

1: jquery.lazyload.js 플러그인

lazyload는 jQuery로 작성된 지연 로딩 플러그인입니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. . 이는 이미지와 유사합니다. 사전 로드는 정확히 반대 방식으로 처리됩니다.

구현 원리

첫째, 선택한 img 요소는 표시 이벤트(img를 처리하여 실제 이미지 주소를 표시하는 작업)에 바인딩되므로 향후 조건이 충족될 때 이벤트가 트리거될 수 있습니다. 구성 개체의 컨테이너 속성 구성은 기본적으로 window입니다. img 요소가 컨테이너 컨테이너 뷰포트에 있으면 나타나는 이벤트가 트리거됩니다.

img 요소가 컨테이너 컨테이너 뷰포트 범위에 있는지 확인하려면 다음이 필요합니다.

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

특정 용도

1. 페이지 소개 방법

lazyload는 jquery를 사용하므로 모든 페이지에 다음과 같이 jquery를 도입해야 합니다.

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

기본 작성 방법:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

data-original 속성은 실제 이미지 URL 경로를 저장합니다.

팁: CSS에서 이미지의 너비나 높이를 설정해야 합니다. 그렇지 않으면 플러그인이 제대로 작동하지 않을 수 있습니다.

임계값 설정

기본적으로 이미지가 화면에 나타날 때 로드됩니다. 이미지를 미리 로드하고 싶다면 임계값 옵션을 200으로 설정하여 이미지를 로드할 수 있습니다. 화면에서 200픽셀 떨어져 있으면 앞으로 이동합니다.

$("img.lazy").lazyload({
    threshold : 200});

로드를 트리거하도록 이벤트 설정

이벤트는 click 및 mouseover와 같은 모든 jQuery 이벤트일 수 있습니다. 또한 sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 사용자가 창에서 이미지 위치로 스크롤할 때까지 회색 자리 표시자 이미지를 클릭하기 전에 이미지가 로드되지 않도록 하려면 다음을 수행할 수 있습니다.

$("img.lazy").lazyload({
    event : "click"});

물론 다음 방법을 사용하여 구현할 수도 있습니다. 지연 로딩:

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

페이지가 로드된 후 5초 후에 이미지 지연 로딩을 수행합니다.

지연 로딩 효과

이미지가 완전히 로드되면 플러그인은 기본적으로 show() 메서드를 사용하여 이미지를 표시합니다. 실제로 다음 코드에서 사용하는 특수 효과를 사용할 수 있습니다. FadeIn 효과:

$("img.lazy").lazyload({
    effect : "fadeIn"});

JavaScript를 지원하지 않는 브라우저를 사용하는 방법

JavaScript는 거의 모든 브라우저에서 활성화됩니다. 그러나 브라우저가 JavaScript를 지원하지 않는 클라이언트에서는 여전히 실제 이미지를 표시하고 싶을 수 있습니다. JavaScript를 지원하지 않습니다. 다운그레이드하려면 실제 이미지 조각을

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

자리 표시자는 CSS를 통해 숨길 수 있습니다.

.lazy {
  display: none;
}

JavaScript를 지원하는 브라우저에서는 DOM이 준비되면 자리 표시자를 표시해야 하며, 이는 플러그인이 초기화되는 동시에 수행될 수 있습니다.

$("img.lazy").show().lazyload();

지연 로딩 이미지 컨테이너 설정

스크롤 막대가 있는 DIV 요소와 같은 스크롤 가능한 컨테이너의 이미지에 플러그인을 사용할 수 있습니다. 컨테이너를 jQuery 개체로 정의하고 이를 전달하기만 하면 됩니다. 매개변수 초기화 방법:

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
    container: $("#container")
});

사진이 순서대로 정렬되지 않은 경우

페이지가 스크롤되면 Lazy Load는 로드된 사진을 반복하여 사진이 보이는 영역 내에 있는지 확인합니다. 기본적으로 첫 번째 그림이 발견됩니다. 보이는 영역에 이미지가 없으면 반복을 중지합니다. 이미지는 유동적으로 배포되는 것으로 간주되며, 페이지 내 이미지의 순서는 HTML 코드의 순서와 동일합니다. 일부 레이아웃에서는 이 가정이 사실이 아닙니다. 그러나 로딩 동작을 제어하기 위해 failurelimit 옵션을 전달할 수 있습니다.

$("img.lazy").lazyload({ 
    failure_limit : 10});

눈에 보이는 영역에 없는 10개의 이미지를 찾은 후에만 플러그인이 검색을 중지하도록 failurelimit를 10으로 설정하세요. 레이아웃이 복잡하다면 이 매개변수를 더 높게 설정하세요.

숨겨진 사진을 로드하도록 설정하세요

페이지에 숨겨진 사진이 많이 있을 수 있습니다. 예를 들어, 플러그인을 사용하여 목록을 필터링하는 경우 목록에 있는 각 항목의 표시 상태를 지속적으로 수정할 수 있습니다. 성능 향상을 위해 숨겨진 이미지를 지연 로드하는 것은 기본적으로 무시됩니다. 숨겨진 이미지를 로드하려면 Skip_invisible을 false로 설정하세요.

$("img.lazy").lazyload({
    skip_invisible : true});

소스 코드

공식 웹사이트 주소:

/*!
     * Lazy Load - jQuery plugin for lazy loading images
     *
     * Copyright (c) 2007-2015 Mika Tuupola
     *
     * Licensed under the MIT license:
     *   
     *
     * Project home:
     *   
     *
     * Version:  1.9.7
     *     */
    (function($, window, document, undefined) {var $window = $(window);
    
        $.fn.lazyload = function(options) {var elements = this;var $container;var settings = {
                threshold       : 0,
                failure_limit   : 0,
                event           : "scroll",
                effect          : "show",
                container       : window,
                data_attribute  : "original",
                skip_invisible  : false,
                appear          : null,
                load            : null,
                placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};    function update() {var counter = 0;
    
                elements.each(function() {var $this = $(this);if (settings.skip_invisible && !$this.is(":visible")) {return;
                    }if ($.abovethetop(this, settings) ||$.leftofbegin(this, settings)) {/* Nothing. */} else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $this.trigger("appear");/* if we found an image we'll load, reset the counter */counter = 0;
                    } else {if (++counter > settings.failure_limit) {return false;
                        }
                    }
                });
    
            }    if(options) {/* Maintain BC for a couple of versions. */if (undefined !== options.failurelimit) {
                    options.failure_limit = options.failurelimit;delete options.failurelimit;
                }if (undefined !== options.effectspeed) {
                    options.effect_speed = options.effectspeed;delete options.effectspeed;
                }
    
                $.extend(settings, options);
            }    /* Cache container as jQuery as object. */$container = (settings.container === undefined ||  settings.container === window) ? $window : $(settings.container);    /* Fire one scroll event per scroll. Not one scroll event per image. */if (0 === settings.event.indexOf("scroll")) {
                $container.bind(settings.event, function() {return update();
                });
            }    this.each(function() {var self = this;var $self = $(self);
    
                self.loaded = false;    /* If no src attribute given use data:uri. */if ($self.attr("src") === undefined || $self.attr("src") === false) {if ($self.is("img")) {
                        $self.attr("src", settings.placeholder);
                    }
                }    /* When appear is triggered load original image. */$self.one("appear", function() {if (!this.loaded) {if (settings.appear) {var elements_left = elements.length;
                            settings.appear.call(self, elements_left, settings);
                        }
                        $("<img />")
                            .bind("load", function() {    var original = $self.attr("data-" + settings.data_attribute);
                                $self.hide();if ($self.is("img")) {
                                    $self.attr("src", original);
                                } else {
                                    $self.css("background-image", "url('" + original + "')");
                                }
                                $self[settings.effect](settings.effect_speed);
    
                                self.loaded = true;    /* Remove image from array so it is not looped next time. */var temp = $.grep(elements, function(element) {return !element.loaded;
                                });
                                elements = $(temp);    if (settings.load) {var elements_left = elements.length;
                                    settings.load.call(self, elements_left, settings);
                                }
                            })
                            .attr("src", $self.attr("data-" + settings.data_attribute));
                    }
                });    /* When wanted event is triggered load original image *//* by triggering appear.                              */if (0 !== settings.event.indexOf("scroll")) {
                    $self.bind(settings.event, function() {if (!self.loaded) {
                            $self.trigger("appear");
                        }
                    });
                }
            });    /* Check if something appears when window is resized. */$window.bind("resize", function() {
                update();
            });    /* With IOS5 force loading images when navigating with back button. *//* Non optimal workaround. */if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
                $window.bind("pageshow", function(event) {if (event.originalEvent && event.originalEvent.persisted) {
                        elements.each(function() {
                            $(this).trigger("appear");
                        });
                    }
                });
            }    /* Force initial check if images should appear. */$(document).ready(function() {
                update();
            });    return this;
        };    /* Convenience methods in jQuery namespace.           *//* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
        $.belowthefold = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
            } else {
                fold = $(settings.container).offset().top + $(settings.container).height();
            }    return fold <= $(element).offset().top - settings.threshold;
        };
    
        $.rightoffold = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = $window.width() + $window.scrollLeft();
            } else {
                fold = $(settings.container).offset().left + $(settings.container).width();
            }    return fold <= $(element).offset().left - settings.threshold;
        };
    
        $.abovethetop = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = $window.scrollTop();
            } else {
                fold = $(settings.container).offset().top;
            }    return fold >= $(element).offset().top + settings.threshold  + $(element).height();
        };
    
        $.leftofbegin = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = $window.scrollLeft();
            } else {
                fold = $(settings.container).offset().left;
            }    return fold >= $(element).offset().left + settings.threshold + $(element).width();
        };
    
        $.inviewport = function(element, settings) {             return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                    !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
         };    /* Custom selectors for your convenience.   *//* Use as $("img:below-the-fold").something() or *//* $("img").filter(":below-the-fold").something() which is faster */
        $.extend($.expr[":"], {"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },"above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },"in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },/* Maintain BC for couple of versions. */"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
        });
    
    })(jQuery, window, document);

둘: 간단한 지연 로딩 플러그인

js 코드

window.smallDelay = (function(window, document, undefined) {'use strict';var store = [],poll;var settings = {
        offset:0, //离可视区域多少像素的图片可以被加载throttle: 250 //图片延时多少毫秒加载    }        var _inView = function(el) {var coords = el.getBoundingClientRect();return ((coords.top >= 0 && coords.left >= 0) && coords.top <= ((window.innerHeight || document.documentElement.clientHeight) + parseInt(settings.offset)));
    };var _pollImages = function() {for (var i = store.length; i--;) {var self = store[i];if (_inView(self)) {
                self.src = self.getAttribute(&#39;data-delay&#39;);
                store.splice(i, 1);
            }
        }
    };var _throttle = function() {
        clearTimeout(poll);
        poll = setTimeout(_pollImages, settings.throttle);
    };var init = function(obj) {var nodes = document.querySelectorAll(&#39;[data-delay]&#39;);var opts = obj || {};
        settings.offset = opts.offset || settings.offset;
        settings.throttle = opts.throttle || settings.throttle;for (var i = 0; i < nodes.length; i++) {
            store.push(nodes[i]);
        }

        _throttle();        //滚动监听执行图片懒加载if (document.addEventListener) {
            window.addEventListener(&#39;scroll&#39;, _throttle, false);
        } else {
            window.attachEvent(&#39;onscroll&#39;, _throttle);
        }        //返回该对象进行链式操作return this;
    };return {
        init: init,
        render: _throttle
    };

})(window, document);

호출 방법: HTML 코드:

rreee

三：根据lazyload插件实现一个不依赖jQuery的懒加载插件

实现内容

1、增加了图片预加载可选

2、修改了图片本身就在可视范围的时候直接显示而不需要滚动条触发

3、修改了Splice删除数组的时候，会跳过下一张图片BUG

4、浏览器窗口resize的时候图片出现也会加载

5、判断图片父层包裹顶部或者底部出现在可视范围内即可显示图片

实现源码

var Lazy = {
        $:function(arg,context){var tagAll,n,eles=[],i,sub = arg.substring(1);
            context = context|| document;if(typeof arg =='string'){switch(arg.charAt(0)){case '#':return document.getElementById(sub);break;case '.':if(context.getElementsByClassName) return context.getElementsByClassName(sub);
                        tagAll = Lazy.$('*');
                        n = tagAll.length;for(i = 0;i<n;i++){if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                        }return eles;break;default:return context.getElementsByTagName(arg);break;
                }
            }
        },
        getPos:function (node) {var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                    scrollt = document.documentElement.scrollTop || document.body.scrollTop;var pos = node.getBoundingClientRect();return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
        },
        bind:function(node,type,handler){
            node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
        },
        unbind:function(node,type,handler){
            node.removeEventListener?node.removeEventListener(type, handler, false):node.detachEvent('on'+ type, handler);
        },
        toArray:function(eles){var arr = [];for(var i=0,n=eles.length;i<n;i++){
                arr.push(eles[i]);
            }return arr;
        }
    };function imgLazyLoad(){var timer,screenHeight = document.documentElement.clientHeight;// 选择所有图片var allimg = Lazy.$(&#39;img&#39;);// 筛选CLASS为lazyload的图片var elems = Lazy.$(&#39;.lazyload&#39;,allimg);// 转换为真正的数组elems = Lazy.toArray(elems);if(!elems.length) return;// 没有发生滚动事件时如果图片在可视范围之内，也显示for(var i = 0;i < elems.length;i++){// 获取图像的父元素即包裹图像的元素，判断图像是否在可视区域即直接判断父元素是否可视var parent = elems[i].parentNode;var pos = Lazy.getPos(parent);var posT = pos.top;var posB = pos.bottom;// 没有滚动条情况如果距离顶部的距离小于屏幕的高度则赋值SRCif(posT < screenHeight){
                elems[i].src = elems[i].getAttribute(&#39;data-img&#39;);// 移除后，数组的长度减一，下一个下标需减一elems.splice(i--,1);
            }
        }// 绑定scroll事件Lazy.bind(window,&#39;scroll&#39;,loading);
        Lazy.bind(window,&#39;resize&#39;,loading);function loading(){
            timer && clearTimeout(timer);
            timer = setTimeout(function(){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                screenHeight = document.documentElement.clientHeight;for(var i = 0;i < elems.length;i++){var parent = elems[i].parentNode;var pos = Lazy.getPos(parent);var posT = pos.top;var posB = pos.bottom;var screenTop = screenHeight+scrollTop;// 元素顶部出现在可视区  或者  元素底部出现在可视区if((posT > scrollTop && posT <  screenTop) || (posB > scrollTop && posB < screenTop)){
                        elems[i].src = elems[i].getAttribute(&#39;data-img&#39;);
                        elems.splice(i--,1);
                    }else{// 去掉以下注释开启图片预加载// new Image().src = elems[i].getAttribute(&#39;data-img&#39;);                    }
                }if(!elems.length){
                    Lazy.unbind(window,&#39;scroll&#39;,loading);
                    Lazy.unbind(window,&#39;resize&#39;,loading);
                }
            },300);
        }
    }
    imgLazyLoad();

使用方法

1、在图片上增加lazyload的类(class='lazyload')

2、把真实的图片地址放入自定义属性data-img 中，把图片的SRC属性设置为一个一像素的透明图片，图片需要设置width，height属性，以免布局混乱

如下：

<img data-img="a.jpg" src="loading.gif" width="640" height="480"   class=&#39;lazyload&#39;>

3、在需要延迟加载的页面调用imgLazyLoad()函数；

该原生js实现的懒加载转载地址：

위 내용은 이미지의 지연 로딩 및 jquery.lazyload.js의 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.