美文网首页开发资料
图片延迟加载

图片延迟加载

作者: 落地成佛 | 来源:发表于2018-07-09 10:38 被阅读20次

</pre><pre name="code" class="html"><script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {("img").delayLoading({
defaultImg: "images/loading.jpg", // 预加载前显示的图片
errorImg: "", // 读取图片错误时替换图片(默认:与defaultImg一样)
imgSrcAttr: "originalSrc", // 记录图片路径的属性(默认:originalSrc,页面img的src属性也要替换为originalSrc)
beforehand: 0, // 预先提前多少像素加载图片(默认:0)
event: "scroll", // 触发加载图片事件(默认:scroll)
duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal"
container: window, // 对象加载的位置容器(默认:window)
success: function (imgObj) { }, // 加载图片成功后的回调函数(默认:不执行任何操作)
error: function (imgObj) { } // 加载图片失败后的回调函数(默认:不执行任何操作)
});
});
</script>
<style type="text/css">
.box{ width:1200px; margin:0 auto;}
.box ul li { width:245px; height:245px; float:left; margin:10px; border:1px solid #e6e6e6; list-style:none; }
.box ul li img{ width:100%; min-height:245px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img originalsrc="images/hua_8.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_2.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/1_030ZTF23528.jpg" /></li>
<li><img originalsrc="images/1_1225092K5R48.jpg" /></li>
<li><img originalsrc="images/1_122FU1035612.jpg" /></li>
<li><img originalsrc="images/_30.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/hua_8.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_2.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/1_030ZTF23528.jpg" /></li>
<li><img originalsrc="images/1_1225092K5R48.jpg" /></li>
<li><img originalsrc="images/1_122FU1035612.jpg" /></li>
<li><img originalsrc="images/_30.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
<li><img originalsrc="images/16.jpg" /></li>
<li><img originalsrc="images/17.jpg" /></li>
<li><img originalsrc="images/18.jpg" /></li>
<li><img originalsrc="images/19.jpg" /></li>
</ul>
</div>

相关文章

  • 懒加载和预加载

    1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载:提前加载图片...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • js 实现图片懒加载

    一、懒加载 懒加载也叫延迟加载,Js中图片的延迟加载,延迟图片需要符合某些条件时才加载;对于图片过多的页面,为了加...

  • javascript图片懒加载与预加载的分析

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才...

  • 业务中常用的原生函数

    一、延迟加载图片 图片进入视觉时开始加载 componentDidMount() { this.t...

  • 图片延迟加载

    (function () {("img").delayLoading({defaultImg: "images/l...

  • 图片延迟加载

    网站性能优化:尽量减少向服务器请求的次数 “减少HTTP请求”: a、CSS/JS文件进行合并b、ICON图片也进...

  • 图片延迟加载

    img { opacity: 1; transition: opacity 0.3s;}img[data-src]...

  • 实现图片延迟加载插件lazyload

    jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可...

网友评论

    本文标题:图片延迟加载

    本文链接:https://www.haomeiwen.com/subject/keezuftx.html