图片懒加载插件 ﹏ヽ暗。殇╰゛Y 2022-06-06 08:07 750阅读 0赞 <body > <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt=""> <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt=""> <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt=""> <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt=""> <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt=""> </body> <script src="echo.js"></script> <script> window.onload = function()\{ Echo.init(\{ offset: 200, //设置图片距离可视区域多少像素被加载(纵向) throttle: 1050 //设置图片延迟加载的时间 \}); \} </script> echo.js 代码 window.Echo = (function(window, document, undefined) \{ 'use strict'; var store = \[\], offset, throttle, poll; var \_inView = function(el) \{ var coords = el.getBoundingClientRect(); return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset)); \}; var \_pollImages = function() \{ for (var i = store.length; i--;) \{ var self = store\[i\]; if (\_inView(self)) \{ self.src = self.getAttribute('data-echo'); store.splice(i, 1); \} \} \}; var \_throttle = function() \{ clearTimeout(poll); poll = setTimeout(\_pollImages, throttle); \}; var init = function(obj) \{ var nodes = document.querySelectorAll('\[data-echo\]'); var opts = obj || \{\}; offset = opts.offset || 0; throttle = opts.throttle || 250; for (var i = 0; i < nodes.length; i++) \{ store.push(nodes\[i\]); \} \_throttle(); if (document.addEventListener) \{ window.addEventListener('scroll', \_throttle, false); \} else \{ window.attachEvent('onscroll', \_throttle); \} \}; return \{ init: init, render: \_throttle \}; \})(window, document);
相关 图片懒加载 1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading 缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 356 阅读
相关 图片懒加载插件 <body > <img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt=""> ﹏ヽ暗。殇╰゛Y/ 2022年06月06日 08:07/ 0 赞/ 751 阅读
相关 图片懒加载 懒加载的意义[(在线demo预览)][demo] 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等,但是 痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 397 阅读
相关 图片懒加载 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一、什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的 你的名字/ 2022年05月28日 05:29/ 0 赞/ 385 阅读
相关 图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度, 偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 423 阅读
相关 图片懒加载 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<me 亦凉/ 2022年05月23日 12:19/ 0 赞/ 369 阅读
相关 图片懒加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 402 阅读
相关 vue图片懒加载插件 vue-lazyload 第一步:安装插件 npm i vue-lazyload --save 第二步:在main.js中引入,并使用 ![watermark_type_ZmFuZ3poZ 柔光的暖阳◎/ 2022年04月16日 06:06/ 0 赞/ 617 阅读
相关 图片懒加载 \[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/ 川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 702 阅读
还没有评论,来说两句吧...