Lazy Load, 延迟加载图片的 jQuery 插件

最新推荐文章于 2021-01-24 09:35:54 发布
最新推荐文章于 2021-01-24 09:35:54 发布
阅读量611 收藏 2
点赞数
分类专栏： javascript jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013160024/article/details/39453447
版权 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.lazyload.js" type="text/javascript"></script>
</head>
<body>
<img class="lazy" src="images/grey.gif" data-original="images/1.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/2.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/3.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/4.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/5.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/6.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/7.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/8.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/9.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/10.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/11.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/12.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/13.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/14.jpg"  width="600" height="600">
<img class="lazy" src="images/grey.gif" data-original="images/15.jpg"  width="600" height="600">


</body>
</html>
<script type="text/javascript">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>








参考范例：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

walkersc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery load 跨域插件
zbzhangzi的专栏
10-18 1125
&lt;script type="text/javascript" src="${ctx}/js/jquery.xdomainajax.js"&gt;&lt;/script&gt; &lt;div id="showDiv"&gt;&lt;/div&gt; &lt;script type="text/javascript"&
img layui 流_layui框架学习之flow组件常见用法总结
weixin_39689700的博客
12-20 655
layui框架的flow组件包含“信息流加载”和“图片懒加载”两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。本教程分别给出了这两种技术的使用方法，希望对大家有一定的帮助。该模块包含 信息流加载 和 图片懒加载 两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。下边分别给出了这两种技术的使用方法：一、信息流加载信息流加载的核心方法时 flow.load(op...
解决Connection to pypi.org timed out问题
热门推荐
weixin_40668374的博客
08-07 1万+
解决Connection to pypi.org timed out问题 pip install pymysql 报下面问题 WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by ‘ConnectTimeoutError(<pip._vendor.urllib3.connection.VerifiedHTTPSConnect
023-流加载
aihiao的专栏
01-24 597
1. 流加载包含信息流加载和图片懒加载两大核心支持, 无论是对服务端、还是前端体验, 都有非常大的性能帮助。 2. 模块加载名称: flow。 3. flow模块包含两个核心方法 3.1. flow模块包含两个核心方法: 信息流和图片懒加载: layui.use('flow', function(){ var flow = layui.flow; // 信息流 flow.load(options); // 图片懒加载 flow.lazyimg(options); }
jquery跨域访问插件
baidu_37366055的博客
11-16 487
给大家介绍个跨域访问的Jquery插件jquery.xdomainajax.js 直接百度也有，不知道为什么我弄不了免费下载 以下是调用方法（注：Jquery部分版本使用该插件无效，现只证明了1.4.1版本有效，1.8.2版本无效） ...
jquery 延迟加载
支离破碎
05-19 467
var trends ={ load:function(){ //第一次加载 var url = $('.teaching .tab a[class="cur"]').attr('url'); $('.loading-btn').hide(); $('.teaching ul').html('正在加载数据...'); $.get(url+'&page=1',function
Lazy Load 延迟加载图片的jQuery插件中文使用文档
12-10
LazyLoad是一种延迟加载策略，通过JavaScript实现，主要用于jQuery框架。它允许网页在用户滚动页面时，只加载当前可视区域内的图片，而在视区之外的图片则保持未加载状态。这样一来，浏览器可以在加载完可见内容后...
Lazy Load 延迟加载图片的 jQuery 插件
10-29
然后，通过在jQuery代码中调用`.lazyload()`方法，指定要延迟加载的图片元素。例如： ```javascript $("img").lazyload(); ``` 这将使页面中所有`<img>`标签的图片延迟加载。如果你想只对某个特定ID下的图片进行...
jquery.lazyload 实现图片延迟加载jquery插件
12-12
怎么实现ImageLazyLoad 一、使用JQuery插件 ，插件名: jquery.lazyload（7kb大小），压缩后（3kb大小） 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...
xdomainajax.zip
11-16
跨域访问的Jquery插件jquery.xdomainajax.js
图片懒加载解决方案 lazyload.js
xuelang532777032的博客
08-27 5470
很多新手知道有懒加载这东西，但是不知道怎么用，所以我自己就写了个案例分享出来给大家 如果你想直接看运行效果  可以点击案例下载     为了确保你看的到懒加载的效果，首先你要做几件事情 1/去下个  jquery.JS和jquery.lazyload.min.js （案例下载里面有） 2/你必须在iis下 运行  （也就是说  纯 html 代码  你看不到懒加载的效果的，除非你上传到
layui.flow(layui的流加载)，图片懒加载，炒鸡好用哦~
星银色飞行船的博客
08-21 3118
前言 读完本文您将了解到：layui的滚动流加载，手动流加载，以及图片的懒加载。 滚动加载：拖动右边的滚动条，即可获取新的数据 手动加载：点击【加载更多】，即可获取新的数据 图片懒加载：始终加载当前屏的图片，减轻网站因为大量图片可能带来的压力。 先来看下最终的效果图。 layui.flow官方api文档 layui.flow官方案例演示文档 flow模块的方法和参数说明 flow模块包含两个核心方法，如下所示： layui.use('flow', function(){ var flow = layu
jQuery跨域
weixin_30677475的博客
05-08 87
jquery1.2以上版本均支持跨域操作，使用方法是GETJSON 实战演练： 前台代码p1.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="p1.aspx.cs" Inherits="test_p1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD X...
layui-流加载
ajlgl的博客
05-19 5489
layui-流加载
小妖姬谷歌跨域插件失效
于心哲的菜园子
02-11 304
分享一个简洁有效的跨域方法： "桌面谷歌快捷方式"的属性中，修改： “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir=D:\google_data 其中：D:\google_data 需要自行建一个目录 从"桌面谷歌快捷方式"打开即可。 ...
前端小白--图片懒加载imgLazyLoading
AIGC大前端小王子
12-15 4338
本文主要介绍web前端使用图片懒加载imgLazyLoading 1、html代码 //懒加载对象目标代码 <img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png"> //引用本地js <script src="__PUBLIC__/js/imgLazyLoading.min.js"></script> <script src="_
jquery.lazyload插件实现图片延迟加载
最新发布
05-25
jquery.lazyload是一款jQuery插件，可以实现图片的延迟加载。当页面加载时，只会加载可视区域内的图片，当页面滚动时，再加载其他的图片，这样可以提高网页的加载速度和用户体验。 使用jquery.lazyload插件，需要先引入jQuery库和jquery.lazyload插件的js文件。然后在页面中需要延迟加载的图片上添加class="lazy"和data-original属性，data-original属性存储了真实的图片地址。 接着在js中编写代码： ``` $(function() { $("img.lazy").lazyload(); }); ``` 这样就完成了延迟加载的设置。如果想要设置一些参数，可以传入一个对象作为参数，如下所示： ``` $(function() { $("img.lazy").lazyload({ effect : "fadeIn", // 图片淡入效果 threshold : 200, // 提前加载像素 failure_limit : 10, // 加载失败重试次数 event : "click", // 事件触发加载 container: $("#container") //容器对象 }); }); ``` 这样就可以根据自己的需求进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值