首页 > 其他分享 >好用的图片懒加载,图片可动态添加

好用的图片懒加载,图片可动态添加

时间:2023-10-26 15:33:07浏览次数:35  
标签:function container settings self fold window 图片 好用 加载

js:


 

/*  * Lazy Load - jQuery plugin for lazy loading images  *  * Copyright (c) 2007-2013 Mika Tuupola  *  * Licensed under the MIT license:  *   http://www.opensource.org/licenses/mit-license.php  *  * Project home:  *   http://www.appelsiini.net/projects/lazyload  *  * Version:  1.9.3  *  */
(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  : true,             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);

 

html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lazy Load Enabled</title>
    <style>         img {             width: 800px;         }
        body {             padding-bottom: 400px;         }     </style>
</head>

<body>     <img class="lazy" data-original="images/1.jpg">     <img class="lazy" data-original="images/2.jpg">     <img class="lazy" data-original="images/3.jpg">     <img class="lazy" data-original="images/4.jpg">     <img class="lazy" data-original="images/5.jpg">
    <button onclick="add()" style="position: fixed;bottom:0;">ADD</button>

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.lazyload.js"></script>
    <script type="text/javascript" charset="utf-8">         $(function () {
            lazyImg()         });         function add() {             $('body').append(`<img class="lazy" data-original="images/1.jpg"  > <img class="lazy" data-original="images/2.jpg"  > <img class="lazy" data-original="images/3.jpg"  > <img class="lazy" data-original="images/4.jpg"  > <img class="lazy" data-original="images/5.jpg"  >`)             lazyImg()         }         function lazyImg() {             $("img.lazy:not([src])").lazyload({ effect: "fadeIn" });
        }     </script> </body>
</html>

标签:function,container,settings,self,fold,window,图片,好用,加载
From: https://www.cnblogs.com/mingluxy/p/17789526.html

相关文章

  • mht文件图片提取 python
    简介mhtml文件又称为聚合html文档、web档案或单一文件网页。单个文件网页可将网站的所有元素(包括文本和图形)都保存到单个文件中。总的来说mht文件保存了一个网页内的所有元素,让用户可以在没有网络的情况下访问网页。本程序提取mht文件中的图片并保存至新建文件夹,同时将其压缩。......
  • 动态库加载失败:error while loading shared libraries: xxx.so: cannot open shared o
    lddmain|grepnot由0.1动态库的工作原理可知,只要把动态库libcalc.so的绝对路径添加到动态载入器ld-linux.so的搜索路径中,那么动态载入器就可以获取到动态库libcalc.so的绝对路径,接着就可以找到动态库文件libcalc.so,将动态库文件载入内存,然后就可以使用动态库里面的代码,最终可......
  • c# Winform中如何把图片添加到resources中
    我们在Winform项目中中需要插入图片资源,但是新建的项目中找不到Resources文件夹,怎么才能出现呢?1:双击项目下的Resources.resx,出现视图2:单击"添加资源",选择"添加现有文件",找到你要添加的图片,确定之后保存就可以了3:这时候你会发现视图中出现添加的图片,解决方案......
  • 用 python-docx 创建浮动图片
    相信大家对python-docx这个常用的操作docx文档的库都不陌生,它支持以内联形状(InlineShape)的形式插入图片,即图片和文本之间没有重叠,遵循流动版式(flowlayout)。但是,截至最新的0.8.10版本,python-docx尚不支持插入浮动图片(floatingpicture)。这显然不能满足丰富多彩的文档样式的需要,因......
  • GitHub仓库的README文件无法显示图片问题-非域名污染原因
    之前上自己仓库就偶然发现图片不显示现象,当时以为是网络问题就没有留意这事。但是一直不显示就有问题了!于是网上搜了一遭,看见大家遇到此现象的原因普遍归于DNS污染1而我的问题原来是MarkDown格式!在图片语法前不要加分区语法“>”,否则尽管在本地能够显示图片,但GitHub显示如下:【小技......
  • 支持读取avif图片的安卓相册软件
    Simple-Gallery这个开源安卓APP是个挺方便的相册软件,可惜不支持avif格式图片。为了节省空间,我的好多图片都转成了avif格式,电脑上能用xnview看,但是手机基本没几个软件能看,因为安卓12已经官方支持avif了,所以很多软件都没有内置avif解码器。我这个华为Nova7机子装的鸿蒙4,系统显示是安......
  • Java拾贝第十一天——IO流之字节流复制图片、视频
    Java拾贝不建议作为0基础学习,都是本人想到什么写什么文件在硬盘或传输时都以字节的形式进行传输。包括图片、视频等。思路:先定位源文件file1作为源文件,file2作为复制文件使用字节流输入流读取file1使用字节流输出流输出file2关闭流。定位源文件,我特地翻出来一张学校......
  • 影视泛目录站群程序:根据关键词产生10组相关词+电影名/电影简介/电影图片匹配,关键词转
    大家好,今天我要分享的是一款影视泛目录站群程序,它可以根据关键词产生10组相关词,帮助你快速构建一个影视站群。首先,我们需要准备一些关键词,比如说电影名、电影简介、电影图片等。然后,我们进入这款程序,输入关键词,就可以看到相关关键词列表。这些关键词分为两部分,一部分是电影名,一部......
  • c# pdf转图片
    需安装nuget包:<packageid="PdfiumViewer"version="2.13.0.0"targetFramework="net45"/><packageid="HiraokaHyperTools.PdfiumViewer.Native.Windows"version="0.1.5637"targetFramework="net45"......
  • 最好用的Android APK第三方下载站,替代Google play
    最好用的AndroidAPK第三方下载站,推荐以下7个替代Googleplay方案可通过第三方应用程序下载各种apk历史版本1、APKPure:APKPure 提供:网页、AppAPKPure是知名度很高的免费安卓应用商店,基本上大部分GooglePlay上架的软件都可以在这里找到,但最近也有被屏蔽的倾向。2、APKMirror......