美文网首页
jquery.lazyload.js插件实现图片延迟加载用法

jquery.lazyload.js插件实现图片延迟加载用法

作者: 雨鱼鱼儿 | 来源:发表于2017-08-01 11:21 被阅读0次

1.这款插件以来jquery.js,所以首先要引用jquery文件

<script src="jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>

2.要有img标签

<img class="lazy" data-original="img/omgWordImg/Homepage_olympics_960x720_large_.jpg" alt="">

图片的真实路径要写在data-original属性中

3.调用lazyload

eg:
$("img.lazy").lazyload();

当图片完全加载的时候,插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果,如fadeIn:

eg:
$("img.lazy").lazyload({
effect : "fadeIn"
});

4.提前加载图片

eg:
$(“img.lazy”).lazyload({
threshold: 200
});

5.设置查找图片张数

可以通过lazyload函数的failure_limit参数:
eg:
$("img.lazy").lazyload({
failure_limit: 20
});

希望对你有帮助,欢迎吐槽。。。。。。。。。。。。。。。。

相关文章

  • jquery.lazyload.js插件实现图片延迟加载用法

    1.这款插件以来jquery.js,所以首先要引用jquery文件 2.要有img标签 图片的真实路径要写在dat...

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

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

  • 懒加载和预加载

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

  • JS

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

  • 插件收藏

    Echo.js – 简单易用的图片延迟加载插件 github:https://github.com/toddmot...

  • 图片懒加载

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

  • js 实现图片懒加载

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

  • 图片懒加载组件与应用

    实现图片只加载首屏用到的,其他的等滚动到再加载这就是图片懒加载 使用vue-lazyload插件实现 安装vue-...

  • 图片的懒加载和预加载

    懒加载:又称延迟加载,需要等到某个情况下才加载,相对可以缓解服务器压力。 实现原理:以懒加载图片为例,当加载图片较...

  • JavaScript实现图片延迟加载

    在日常的抓取工作当中,经常看到网站为了减轻网页加载所需资源对图片等资源进行延迟加载。那什么样的页面需要用到延迟加载...

网友评论

      本文标题:jquery.lazyload.js插件实现图片延迟加载用法

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