图片懒加载 缺乏、安全感 2022-06-16 06:44 485阅读 0赞 1.引入js jquery.lazyload.js(如下) /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2009 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.5.0 * */ (function($) { $.fn.lazyload = function(options) { var settings = { threshold : 0, failurelimit : 0, event : "scroll", effect : "show", container : window }; if(options) { $.extend(settings, options); } /* Fire one scroll event per scroll. Not one scroll event per image. */ var elements = this; if ("scroll" == settings.event) { $(settings.container).bind("scroll", function(event) { var counter = 0; elements.each(function() { if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $(this).trigger("appear"); } else { if (counter++ > settings.failurelimit) { return false; } } }); /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); }); } this.each(function() { var self = this; /* Save original only if it is not defined in HTML. */ if (undefined == $(self).attr("original")) { $(self).attr("original", $(self).attr("src")); } if ("scroll" != settings.event || undefined == $(self).attr("src") || settings.placeholder == $(self).attr("src") || ($.abovethetop(self, settings) || $.leftofbegin(self, settings) || $.belowthefold(self, settings) || $.rightoffold(self, settings) )) { if (settings.placeholder) { $(self).attr("src", settings.placeholder); } else { $(self).removeAttr("src"); } self.loaded = false; } else { self.loaded = true; } /* When appear is triggered load original image. */ $(self).one("appear", function() { if (!this.loaded) { $("<img />") .bind("load", function() { $(self) .hide() .attr("src", $(self).attr("original")) [settings.effect](settings.effectspeed); self.loaded = true; }) .attr("src", $(self).attr("original")); }; }); /* When wanted event is triggered load original image */ /* by triggering appear. */ if ("scroll" != settings.event) { $(self).bind(settings.event, function(event) { if (!self.loaded) { $(self).trigger("appear"); } }); } }); /* Force initial check if images should appear. */ $(settings.container).trigger(settings.event); return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).height() + $(window).scrollTop(); } else { var fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).width() + $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left + $(settings.container).width(); } return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollTop(); } else { var fold = $(settings.container).offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; /* Custom selectors for your convenience. */ /* Use as $("img:below-the-fold").something() */ $.extend($.expr[':'], { "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" }); })(jQuery); 2.初始化页面 $(function(){ $(".body_main img").lazyload({ effect : "fadeIn", failurelimit : 5 }); }); ![Center][] ![Center 1][] [Center]: /images/20220616/91d14ef1daaf4147b30d973012800035.png [Center 1]: /images/20220616/bd6b4858e7a74c8fb051d51205a29668.png
相关 图片懒加载 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmds 青旅半醒/ 2022年11月16日 13:41/ 0 赞/ 322 阅读
相关 图片懒加载 function lazyLoadImg() { var img = document.getElementsByTagName('img'); s 谁践踏了优雅/ 2022年09月28日 13:05/ 0 赞/ 385 阅读
相关 图片懒加载 在一个项目中,如果同时加载的图片太多的话,会导致页面卡顿,这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件,先加载出前面几张图片,然后当滚动条滚动的时候再依次加 分手后的思念是犯贱/ 2022年06月17日 13:49/ 0 赞/ 167 阅读
相关 图片懒加载 1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading 缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 486 阅读
相关 图片懒加载 懒加载的意义[(在线demo预览)][demo] 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等,但是 痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 526 阅读
相关 图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度, 偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 549 阅读
相关 图片懒加载 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<me 亦凉/ 2022年05月23日 12:19/ 0 赞/ 485 阅读
相关 图片懒加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 528 阅读
相关 图片懒加载 \[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/ 川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 844 阅读
还没有评论,来说两句吧...