jquery.lazyload.js,jquery lazyload

jquery.lazyload.js,jquery lazyload,lazyload.js详解(推荐)

Lazyload.js用于延迟加载长页面图片,视窗滚动到其位置时会加载视窗外的图片,与预加载相反。本文主要介绍lazyload.js的详细讲解,有需要的朋友可以参考一下。

目录

介绍优点:通过预先加载——Threshold事件(可以是jquery事件也可以是自定义事件)来触发安装,——事件设置效果——效果滚动容器中的图片——容器乱序处理隐藏图片——skip_invisible

简介

Lazyload.js用于长页面图片的延迟加载。当窗口滚动到其位置时,视窗外的图片将被加载,这与预加载相反。

优点:

可以提高页面加载速度;在某些情况下,它还可以帮助减少服务器负载。

安装

凉亭安装:

$ bower安装jquery.lazyload

Npm安装:

$ npm安装jquery-lazyload

使用

Lazyload依赖和jquery。所以先介绍jquery和lazyload。

script src='jquery.js'/script

script src=' jquery . lazy load . js '/script

1.将图像路径写入data-original属性。

2.将名为lazy的类添加到lazyload的映像中。

3.选择所有图片(img.lazy)进行惰性加载,执行惰性加载();

img class=' lazy ' data-original=' img/example . jpg ' style=' margin-top:1000 px ' height=' 200 '

脚本

$(function(){

$('img.lazy ')。lazy load();

})

/脚本

注意:您必须设置图片的高度或宽度,否则插件可能无法正常工作。

提前加载——Threshold

当滚动到图片位置时,Lazyload默认加载图片。但是,您可以将阈值参数设置为当您滚动到远离它的xx px时加载。

$(function(){

$('img.lazy ')。lazyload({

门槛:20

});

})

上面的例子设置了当你从图片滚动到20px时,图片将再次开始加载。

事件触发(可以是jquery事件,也可以是自定义事件)——Event

当定义的事件被触发时,图片开始加载。

$(function(){

$('img.lazy ')。lazyload({

事件:“点击”

});

})

上面的例子让图像在开始加载前点击。

提示:你可以用它来实现图片的延迟加载。

$(function() {

$('img.lazy ')。lazyload({

事件:“运动型”

});

});

$(窗口)。bind('load ',function() {

var time out=setTimeout(function(){

$('img.lazy ')。触发器(“运动型”)

}, 5000);

});

上面的代码直到页面加载五秒钟后才开始加载图片。

设定效果——Effects

插件默认的加载效果是show(),你可以使用任何你想要的效果。下面的代码使用fadeIn()

$('img.lazy ')。lazyload({

效果:“淡入”

});

滚动容器内的图片——container

插件也可以用在滚动容器中的图片上。下面的div有一个scrollerbar,内容的内容滚动。当内容滚动到图像位置时,图像开始加载。

div style=' height:600 px;溢出:滚动' id='container '

img class=' lazy ' data-original=' img/example . jpg ' alt=' ' style=' margin-top:1000 px ' height=' 200 '

/div

脚本

$(function(){

$('img.lazy ')。lazyload({

容器:$('#container ')

});

})

/脚本

不顺序排列的图片

插件将执行一个循环来查找未加载的图像,这将检查图像是否可见。默认情况下,当找到第一个视图之外的图像时,循环将停止。但是有一种情况:页面布局图片的顺序和html图片代码的顺序不一致;会导致本该加载的东西没有加载。在这种情况下,您可以将failurelimit设置为10,这将使插件在找到10张不在可见区域的图片时停止搜索。如果你有恶心的布局,请把这个参数设置高一点。

代码:

$('img.lazy ')。lazyload({

失败_限制:10

});

处理隐藏图片——skip_invisible

为了提高性能,插件默认忽略隐藏图片;如果你想加载隐藏图片。将skip_invisible设置为false

注意:Webkit浏览器会自动将没有宽度和高度的图像视为不可见。

$('img.lazy ')。lazyload({

skip_invisible : true

});

关于lazyload.js的这篇文章到此为止,关于lazyload.js的更多细节请搜索我们之前的文章或者继续浏览下面的相关文章,希望大家以后能支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: