前端开发技能必备系列,jquery图片延迟加载

脚下,首要的购物网址都使用了这种加载形式。今日在三个网上好朋友的站里开采叁个图片延迟加载的插件,很好用,在那边介绍一下。
先介绍一下图形延迟加载原理。大家供给先将图片的真人真事地址保存在八个自定义的性质中(属性名任你抒发吗,这里本身用的是lazy-src),而图片的src属性中用二个占位图片来取代,那一个占位图片当然是越小越好,它基本上只工作、不露面。

明天看了下jquery图片延迟加载的主意。以为没有错,对顾客体验那块非常好的,摘抄下来,方便温馨随后学习。
这里根本用的多个开源的js——jquery.lazyload.js,上边附上那几个js的源代码
[code lang=”js”] <pre>/* * Lazy Load – jQuery plugin for lazy
loading images * * Copyright (c) 2007-2012 Mika Tuupola * * Licensed
under the MIT license: *
* * Project home:
* * * Version: 1.8.3 *
*/ (function($, window, document, undefined) { var $window = $(window);
$.fn.lazyload = function(options) { var elements = this; var $container;
var settings = { threshold : 0, failure_limit : 0, event : “scroll”,
effect : “show”, container : window, data_attribute : “original”,
skip_invisible : true, appear : null, load : null }; function update()
{ var counter = 0; elements.each(function() { var $this = $(this); if
(settings.skip_invisible && !$this.is(“:visible”)) { return; } if
($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /*
Nothing. */ } else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) { $this.trigger(“appear”); /* if we
found an image we’ll load, reset the counter */ counter = 0; } else {
if (++counter > settings.failure_limit) { return false; } } }); }
if(options) { /* Maintain BC for a couple of versions. */ if
(undefined !== options.failurelimit) { options.failure_limit =
options.failurelimit; delete options.failurelimit; } if (undefined !==
options.effectspeed) { options.effect_speed = options.effectspeed;
delete options.effectspeed; } $.extend(settings, options); } /* Cache
container as jQuery as object. *前端开发技能必备系列,jquery图片延迟加载。/ $container = (settings.container ===
undefined || settings.container === window) ? $window :
$(settings.container); /* Fire one scroll event per scroll. Not one
scroll event per image. */ if (0 === settings.event.indexOf(“scroll”))
{ $container.bind(settings.event, function(event) { return update(); });
} this.each(function() { var self = this; var $self = $(self);
self.loaded = false; /* When appear is triggered load original image.
*/ $self.one(“appear”, function() { if (!this.loaded) { if
(settings.appear) { var elements_left = elements.length;
settings.appear.call(self, elements_left, settings); } $(“<img
/>”) .bind(“load”, function() { $self .hide() .attr(“src”,
$self.data(settings.data_attribute))
[settings.effect](settings.effect_speed); self.loaded = true; /*
Remove image from array so it is not looped next time. */ var temp =
$.grep(elements, function(element) { return !element.loaded; });
elements = $(temp); if (settings.load) { var elements_left =
elements.length; settings.load.call(self, elements_left, settings); }
}) .attr(“src”, $self.data(settings.data_attribute)); } }); /* When
wanted event is triggered load original image */ /* by triggering
appear. */ if (0 !== settings.event.indexOf(“scroll”)) {
$self.bind(settings.event, function(event) { if (!self.loaded) {
$self.trigger(“appear”); } }); } }); /* Check if something appears when
window is resized. */ $window.bind(“resize”, function(event) {
update(); }); /* With IOS5 force loading images when navigating with
back button. */ /* Non optimal workaround. */ if
((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
$window.bind(“pageshow”, function(event) { if
(event.originalEvent.persisted) { elements.each(function() {
$(this).trigger(“appear”); }); } }); } /* Force initial check if images
should appear. */ $(window).load(function() { update(); }); return
this; }; /* Convenience methods in jQuery namespace. */ /* Use as
$.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) { var fold; if
(settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop(); } else { fold =
$(settings.container).offset().top + $(settings.container).height(); }
return fold <= $(element).offset().top – settings.threshold; };
$.rightoffold = function(element, settings) { var fold; if
(settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft(); } else { fold =
$(settings.container).offset().left + $(settings.container).width(); }
return fold <= $(element).offset().left – settings.threshold; };
$.abovethetop = function(element, settings) { var fold; if
(settings.container === undefined || settings.container === window) {
fold = $window.scrollTop(); } else { fold =
$(settings.container).offset().top; } return fold >=
$(element).offset().top + settings.threshold + $(element).height(); };
$.leftofbegin = function(element, settings) { var fold; if
(settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft(); } else { fold =
$(settings.container).offset().left; } return fold >=
$(element).offset().left + settings.threshold + $(element).width(); };
$.inviewport = function(element, settings) { return
!$.rightoffold(element, settings) && !$.leftofbegin(element, settings)
&& !$.belowthefold(element, settings) && !$.abovethetop(element,
settings); }; /* Custom selectors for your convenience. */ /* Use as
$(“img:below-the-fold”).something() or */ /*
$(“img”).filter(“:below-the-fold”).something() which is faster */
$.extend($.expr[‘:’], { “below-the-fold” : function(a) { return
$.belowthefold(a, {threshold : 0}); }, “above-the-top” : function(a) {
return !$.belowthefold(a, {threshold : 0}); }, “right-of-screen”:
function(a) { return $.rightoffold(a, {threshold : 0}); },
“left-of-screen” : function(a) { return !$.rightoffold(a, {threshold :
0}); }, “in-viewport” : function(a) { return $.inviewport(a, {threshold
: 0}); }, /* Maintain BC for couple of versions. */ “above-the-fold” :
function(a) { return !$.belowthefold(a, {threshold : 0}); },
“right-of-fold” : function(a) { return $.rightoffold(a, {threshold :
0}); }, “left-of-fold” : function(a) { return !$.rightoffold(a,
{threshold : 0}); } }); })(jQuery, window, document);</pre>
[/code] 使用方法: 1.导入JS插件 <script src=”jquery.js”
type=”text/javascript”></script> <script
src=”jquery.lazyload.js” type=”text/javascript”></script>
2.在您的页面中投入如下的javascript:
$(“img”).lazyload(); 那将会使全体的图纸都延迟加载。
当然插件还只怕有几个布局项可供设置。 1.改造threshold $(“img”).lazyload({
threshold : 200 }); 把阀值设置成200 意思就是当图片并未有看到前边先load
200像素。 2.当然了你也得以通过安装占位符图片和自定事件来触发加载图片事件
[code lang=”js”] $(“img”).lazyload({ placeholder : “img/grey.gif”,
event : “click” }); [/code] 3.能够经过定义effect
参数来定义一些图片彰显效果 [code lang=”js”] $(“img”).lazyload({
placeholder : “img/grey.gif”, effect : “fadeIn” }); [/code]
LazyLoad(延迟加载)本领不仅仅用在对网页中图纸的推移加载,对数据一致可以,谷歌里德r和Bing图片检索就把 LazyLoad技艺使用的淋漓; 缺欠:
1.与Ajax本领的争持;
2.图形的延期加载,碰到高度非常高的图片,会现出停止加载的难题;
3.写代码不正规的同班要注意了,不管由于什么来头,要是您的页面中,img标签的height属性未定义,那么自个儿提议您最棒永不使用ImageLazyLoad
下边附上抄的代码,呵呵: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“; <html
xmlns=”; <head><meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>图片延迟加载-柯乐义</title> <script
type=”text/javascript”
src=”;
<script type=”text/javascript”
src=”;
</head> <body> jquery达成图片延迟加载效果 <a
href=””
target=”_blank”>原文</a><br /> <img
src=””
data-original=””
width=”765″ height=”574″ alt=”BMW M1 Hood keleyi.com” /><br />
<img src=””
data-original=””
width=”765″ height=”574″ alt=”BMW M1 Side keleyi.com” /><br />
<img src=””
data-original=””
width=”765″ height=”574″ alt=”Viper 1 keleyi.com” /> <img
src=””
data-original=””
width=”765″ height=”574″ alt=”Viper Corner keleyi.com” /><br />
<img src=””
data-original=””
width=”765″ height=”574″ alt=”BMW M3 GT keleyi.com” /> <img
src=””
data-original=””
width=”765″ height=”574″ alt=”Corvette Pitstop keleyi.com” />
<script type=”text/javascript” charset=”utf-8″> $(function () {
$(“img”).lazyload({ effect: “fadeIn” }); }); </script>
</body> </html>

jQuery图片延迟加载,jquery延迟加载

此地延迟加载的意思是,拖动滚动条时,在图纸出现在浏览器突显区域后才加载呈现。在那前边全体图片都由一张图纸代替。节省流量,减轻服务器担任。

意义呈现 

请用鼠标只怕键盘方向键使页面向下滚动,注意图片的变化。本特效未有动用特地的图纸延迟加载插件,只须要一小段jQuery代码就完毕了图片延迟加载,使用非常低价。在本文后边附有源码下载。

用到的加载中的图片:
图片 1

图片 2

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>jQuery鼠标滚动页面图片延迟加载_何问起</title><base target="_blank" />
    <meta name="description" content="何问起">
    <meta name="keywords" content="何问起">
    <link href="" rel="stylesheet">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .hovertreebox {
            padding-top: 800px;
        }

        .img_hovertreebox {
            float: left;
            width: 33%;
            text-align: center;
            margin-bottom: 100px;
        }
        .hovertreeinfo{text-align:center;}
        .hovertreeinfo a{color:blue;}
    </style>
    <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(window).scroll(function(event) {
          var ah=$(window).scrollTop();
          var ch=$(window).height()
          $('.img_hovertreebox').each(function(){
            var bh=$(this).offset().top;
            if(ch+ah-200>bh){
                var a=$(this).find('img').attr("load_src");
                 $(this).find('img').attr("src",a);
            }
          })
        });
    })
    </script>
</head>
<body>
    <div class="hovertreeinfo"><h1>jQuery鼠标滚动页面图片延迟加载</h1>
    请向下滚动页面。注意图片的变化。
        <a href="http://hovertree.com">何问起</a>
        <a href="http://hovertree.com/menu/texiao/">网页特效</a>
        <a href="http://hovertree.com/h/bjaf/yanchijaizai.htm">代码说明</a>
    </div>
    <div class="hovertreebox">
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://www.bkjia.com/uploads/allimg/160628/16243RT9-1.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png">
        </div>
        <div class="img_hovertreebox">
            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png">
        </div>
    </div>
</body>
</html>

源码下载:

特效汇总:

这里延迟加载的情趣是,拖动滚动条时,在图片出现在浏览器彰显区域后才加载展现。在那前边一切图片…

复制代码 代码如下:

<img src=”images/placeholder.png” lazy-src=”images/realimg.jpg”
alt=”” />
<!–
如果浏览器禁止使用了js,我们也非得让网页显示图片撒,所以最棒是加上上面一句备用代码
–>
<noscript><img src=”images/realimg.jpg” alt=””
/></noscript>

相关文章