JQ图片懒加载 偏执的太偏执、 2022-05-22 09:53 168阅读 0赞 废话不多说，直接上代码。 预览地址：[http://www.bright2017.top/test1/test1-18/][http_www.bright2017.top_test1_test1-18] <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片懒加载</title> <style type="text/css"> .Demo{width: 1000px;margin: 50px auto;} .Demo>div{display: inline-block;width: 485px;height: 400px;margin-right: 25px;margin-bottom: 25px;} .Demo>div:nth-child(2n){margin-right: 0;} .Demo>div>img{width: 100%;height: 100%;} </style> </head> <body> <div class="Demo"> <div> <img src="img/timg.gif" data-original="img/1.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/2.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/3.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/4.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/5.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/6.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/7.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/8.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/9.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/10.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/11.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/12.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/13.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/1.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/2.jpg" class="lazy"/> </div> <div> <img src="img/timg.gif" data-original="img/999.jpg" class="lazy"/> </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script> <script type="text/javascript"> $(function(){ $(".lazy").lazyload({effect:"fadeIn",threshold:5}); }); </script> </body> </html> 参数设置 $(".xxx").lazyload(\{ placeholder : "img/grey.gif", //用图片提前占位 // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 effect: "fadeIn", // 载入使用何种效果 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前开始加载 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉 event: 'click', // 事件触发时才加载 // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… container: $("\#container"), // 对某容器中的图片实现效果 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 failurelimit : 10 // 图片排序混乱时 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题. \}); [http_www.bright2017.top_test1_test1-18]: http://www.bright2017.top/test1/test1-18/
相关 图片懒加载 function lazyLoadImg() { var img = document.getElementsByTagName('img'); s 谁践踏了优雅/ 2022年09月28日 13:05/ 0 赞/ 361 阅读
相关 图片懒加载 1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading 缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 461 阅读
相关 图片懒加载 懒加载的意义[（在线demo预览）][demo] 尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是 痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 505 阅读
相关 图片懒加载 本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出 一、什么是图片滚动加载？ 通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的 你的名字/ 2022年05月28日 05:29/ 0 赞/ 495 阅读
相关 图片懒加载 在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度， 偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 532 阅读
相关 图片懒加载 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<me 亦凉/ 2022年05月23日 12:19/ 0 赞/ 463 阅读
相关 JQ图片懒加载 废话不多说，直接上代码。 预览地址：[http://www.bright2017.top/test1/test1-18/][http_www.bright2017.top_t 偏执的太偏执、/ 2022年05月22日 09:53/ 0 赞/ 169 阅读
相关 图片懒加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 501 阅读
相关 图片懒加载 \[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/ 川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 814 阅读
谁践踏了优雅
你的名字
亦凉
还没有评论，来说两句吧...