jQuery滚动加载图片效果的兑现

复制代码 代码如下:

Jquery达成图片预加载与延时加载的不二秘籍,jquery完毕延时加载

本文实例呈报了Jquery完结图片预加载与延时加载的办法。分享给咱们供大家参谋。具体深入分析如下:

有众多项目通常会需求看清图片加载成功后举行相应的操作,可能需求图片延迟加载,英特网尽管一度有很不利的插件,但要为这一个职能还得单独加载二个插件的话总感到微微不舒服,干脆自身写了个艺术:

复制代码 代码如下:

function loadimg(arr,funLoading,funOnLoad,funOnError){
 var numLoaded=0,
 numError=0,
 isObject=Object.prototype.toString.call(arr)===”[object Object]” ?
true : false;
 
 var arr=isObject ? arr.get() : arr;
 for(a in arr){
  var src=isObject ? $(arr[a]).attr(“data-src”) : arr[a];
  preload(src,arr[a]);
 }
 
 function preload(src,obj){
  var img=new Image();
  img.onload=function(){
   numLoaded++;
   funLoading && funLoading(numLoaded,arr.length,src,obj);
   funOnLoad && numLoaded==arr.length && funOnLoad(numError);
  };
  img.onerror=function(){
   numLoaded++;
   numError++;
   funOnError && funOnError(numLoaded,arr.length,src,obj);
  }
  img.src=src;
 }
}

参数表明:

arr:能够是存放图片路线的三个数组,也得以是选项到的img的jquery对象;
funLoading:每叁个单独的图片加载成功后实践的操作;
funOnLoad:全体图片都加载成功后的操作;
funOnError:单个图片加载出错开上下班时间的操作。

如:

复制代码 代码如下:

var imgonload=function(errors){
        /*errors:加载出错的图形数量;*/
 console.log(“loaded,”+errors+” images loaded error!”);
}
 
var funloading=function(n,total,src,obj){
        /*
        n:已加载成功的数目;
        total:总共需加载的图样数量;
        src:当前加载成功的图形路线;
       
obj:当loadimg函数中流传的arr为寄放图片路线的数组时,obj=src,是图表路线,
               当arr为jquery对象时,obj是近来加载成功的img dom对象。
       */
 console.log(n+”of”+total+” pic loaded.”,src);
 var newimg = document.createElement(“img”);
 newimg.src=src;
 $(“body”).append(newimg).fadeIn();
}
 
var funloading_obj=function(n,total,src,obj){
 console.log(n+”of”+total+” pic loaded.”,src);
 $(obj).attr(“src”,src);
 $(obj).fadeIn(200);
}
 
var funOnError=function(n,total,src,obj){
 console.log(“the “+n+”st img loaded Error!”);
}

调用示例:

复制代码 代码如下:

console.log(“loading…”);
loadimg($(“img”),funloading_obj,imgonload,funOnError);
/*loadimg([“”,
   “/20120531/1670912_103610084349_2.jpg”,
   “/20120616/4952071_130629530136_2.jpg”,
   “/20120610/1723580_105037029000_2.jpg”,
   “”
  ],funloading,imgonload,funOnError);*/

下面到底原生态写法了,下边大家介绍一个基于Lazy Load, 延迟加载图片的
jQuery 插件

Lazy Load 重视于 jQuery. 请将下列代码参预页面 head 区域:

复制代码 代码如下:

<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js”
type=”text/javascript”></script>

您无法不修改 HTML 代码. 在 src 属性中安装展位符图片, demo 页面使用 1×1
像素金色 GIF 图片. 並且要求将忠实图片的 UOdysseyL 设置到 data-original 属性.
这里能够定义特定的 class 以获得供给延期加载的图样对象.
通过这种形式你可以简简单单地调整插件绑定.

复制代码 代码如下:

<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” 
width=”640″ heigh=”480″>

管理图片的代码如下.

复制代码 代码如下:

$(“img.lazy”).lazyload();

这将使具备 class 为 lazy 的图样将被延迟加载. 能够参见基本选项 demo

设置敏感度

差一些全体浏览器的 JavaScript 都以激活的. 然则可能你仍希望能在不帮助JavaScript 的客户端体现实在图片. 当浏览器不扶助 JavaScript 时优雅降级,
你能够将忠实的图纸部分在写 <noscript> 标签内.

复制代码 代码如下:

<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” 
width=”640″ heigh=”480″>
<noscript><img src=”img/example.jpg” width=”640″
heigh=”480″></noscript>

能够通过 CSS 隐蔽占位符.

复制代码 代码如下:

.lazy {
  display: none;
}

在支撑 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来,
那足以在插件初步化的还要做到.

复制代码 代码如下:

$(“img.lazy”).show().lazyload();

这么些都以可选的, 但假设您期望插件平稳降级那些都以应有做的.

设置敏感度

暗中认可情状下图片会产出在显示器时加载. 假如您想提前加载图片, 能够安装
threshold 选项, 设置 threshold 为 200 令图片在相距显示器 200
像素时提前加载.

复制代码 代码如下:

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

占位图片

你还足以设定一个占位图片并定义事件来触发加载动作.
那时需求为占位图片设定一个 U君越L 地址. 透明, 灰褐和影青的 1×1
象素的图纸已经包罗在插件里面.

事件触发加载

事件能够是任何 jQuery 时间, 如: click 和 mouseover.
你还足以使用自定义的风浪, 如: sporty 和 foobar. 暗中同意意况下处于等候状态,
直到用户滚动到窗口上海教室片所在地方. 在莲灰占位图片被点击在此之前阻止加载图片,
你能够如此做:

复制代码 代码如下:

$(“img”).lazyload({
 placeholder : “img/grey.gif”,
 event : “click”
});

使用特效

当图片完全加载的时候, 插件暗中认可地运用 show() 方法来将图显示出来.
其实您能够动用另外你想用的特效来管理. 下边包车型大巴代码应用 FadeIn 效果.
那是效果演示页面.

复制代码 代码如下:

$(“img.lazy”).lazyload({
    effect : “fadeIn”
});

图形在容器里面

您能够将插件用在可滚动容器的图形上, 比如带滚动条的 DIV 成分.
你要做的只是将容器定义为 jQuery 对象并作为参数字传送到开头化方法里面.
那是程度滚动演示页面和垂直滚动的示范页面.

复制代码 代码如下:

#container {
    height: 600px;
    overflow: scroll;
}
$(“img.lazy”).lazyload({        
     container: $(“#container”)
});

当图片不顺序排列

滚动页面包车型大巴时候, Lazy Load 会循环为加载的图片.
在循环中检验图片是不是在可视区域内.
暗中同意意况下在找到第一张不在可知区域的图样时停下循环.
图片被以为是流式分布的, 图片在页面中的次序和 HTML 代码中次序一样.
但是在部布满局中, 那样的倘诺是不创建的. 然而你能够经过 failurelimit
选项来调整加载行为.

复制代码 代码如下:

$(“img.lazy”).lazyload({
    failure_limit : 10
});

将 failurelimit 设为 10 令插件找到 10 个不在可知区域的图样是才停下搜索.
假诺你有三个世俗的布局, 请把那一个参数设高一点.

延迟加载图片

Lazy Load 插件的一个不完整的法力, 可是那也能用来贯彻图片的推移加载.
上边包车型客车代码达成了页面加载成功后再加载. 页面加载成功 5 秒后,
钦点区域内的图样会自动实行加载. 那是延迟加载演示页面.

复制代码 代码如下:

$(function() {         
    $(“img:below-the-fold”).lazyload({
        event : “sporty”
    });
});
$(window).bind(“load”, function() {
    var timeout = setTimeout(function()
{$(“img.lazy”).trigger(“sporty”)}, 5000);
});

加载隐敝的图片

也许在你的页面上埋藏可比相当多遮掩的图片. 例如插件用在对列表的筛选,
你能够不断地修改列表中各条指标显得状态. 为了提高品质, Lazy Load
默许忽略了藏匿图片. 假如你想要加载遮盖图片, 请将 skip_invisible 设为
false

复制代码 代码如下:

$(“img.lazy”).lazyload({
    skip_invisible : false
});

目的在于本文所述对大家的javascript程序设计有着帮忙。

本文实例汇报了Jquery完毕图片预加载与延时加载的艺术。分享给我们供大家参照他事他说加以考察…

复制代码 代码如下:

 最终在调用函数。

复制代码 代码如下:

             if((post > st && post < sth) || (posb > st && posb
< sth))
             {

复制代码 代码如下:

复制代码 代码如下:

$(“img.lazy”).lazyload({
    effect : “fadeIn”
});

scrollLoading();
$(window).bind(“scroll”, scrollLoading);

滚动页面包车型客车时候, Lazy Load 会循环为加载的图片.
在循环中检验图片是不是在可视区域内.
私下认可景况下在找到第一张不在可见区域的图片时停下循环.
图片被感到是流式布满的, 图片在页面中的次序和 HTML 代码中次序同样.
可是在一部分搭架子中, 这样的假设是不树立的. 可是你能够透过 failurelimit
选项来支配加载行为.

 下边是兑现滚动加载的一个效率函数;上边在html代码中供给在img中加多少个xsrc属性一时存放真实图片的不二等秘书诀,src中则寄存loading图片的不二秘诀,为各类须要完成那个效应的图形加三个名称为“scrloadpic”的类。

复制代码 代码如下:

你或然感兴趣的稿子:

  • jQuery延迟加载图片插件Lazy
    Load使用指南
  • jQuery达成预加载图片的章程
  • jQuery
    oLoader达成的加载图片和页面效果
  • jquery插件lazyload.js延迟加载图片的接纳情势
  • JQuery加载图片自适应固定大小的DIV
  • jquery中加载图片自适应大小主要达成代码
  • Lazy Load
    延迟加载图片的jQuery插件普通话使用文书档案
  • jQuery 瀑布流
    相对定位布局(二)(延迟AJAX加载图片)
  • jQuery 瀑布流
    浮动布局(一)(延迟AJAX加载图片)
  • jquery动态加载图片数据演练代码
  • jQuery
    完结图片的顺序加载图片功用

复制代码 代码如下:

                 var url = $temppic.attr(“xsrc”);
                 if(url != “”)
                 {
                    $temppic.attr(“src”, url);
                    $temppic.attr(“xsrc”, “”);
                 }
             }
         }
     }

那些都以可选的, 但借使您愿意插件平稳降级这几个都以应有做的.

复制代码 代码如下:

您还足以设定二个占位图片并定义事件来触发加载动作.
那时须求为占位图片设定一个 U逍客L 地址. 透明, 浅蓝和反动的 1×1
象素的图形已经满含在插件里面.

<BR>/****************滚动加载图片函数****************/
     function scrollLoading(){
         var st = $(window).scrollTop(), sth = st +
$(window).height();
         var $targetpics = $(“img.scrloadpic”);
         var len = $targetpics.length;
         for(var i=0; i< len; i++)
         {
             var $temppic = $targetpics.eq(i);
             var post = $temppic.position().top;
             var posb = post + $temppic.height();

图形在容器里面

<img src=”load.gif” xsrc=”myimgae.jpg” class=”scrloadpic”/>

Lazy Load 插件的叁个不完全的功效, 可是这也能用来落实图片的延期加载.
上边包车型客车代码完毕了页面加载成功后再加载. 页面加载成功 5 秒后,
内定区域内的图形会活动举行加载. 那是延迟加载演示页面.

你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1×1
像素黄绿 GIF 图片. 並且须要将真实图片的 U奥迪Q7L 设置到 data-original 属性.
那边能够定义特定的 class 以赢得需求延期加载的图片对象.
通过这种办法您能够省略地决定插件绑定.

在支撑 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符展现出来,
那足以在插件最先化的还要到位.

将 failurelimit 设为 10 令插件找到 10 个不在可知区域的图片是才止住寻觅.
假如您有三个无聊的布局, 请把这些参数设高级中学一年级点.

复制代码 代码如下:

<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” 
width=”640″ heigh=”480″>
<noscript><img src=”img/example.jpg” width=”640″
heigh=”480″></noscript>

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

设置敏感度

当图片不顺序排列

参数表明:

推迟加载图片

<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js”
type=”text/javascript”></script>

动用特效

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图