现在很多都有进行设置分屏图片加载,减轻了宽带的负担,特别是图片比较多的网站,很多访客只看了头部的一些东西,如果不感兴趣就直接关闭了,如果直接在打开的时候就加载了全部的图片,加大了服务器的负担,而且用户体验也不好,打开的时候速度会比较慢,今天我这边就分享了一个比较常见的分屏加载的插件 jquery_lazyload这个插件。

先看下我的demo,里面的一些常见的设置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.lazyload.js"></script>
	<script type="text/javascript">
		$(function(){
			$("img.lazy").lazyload({
				effect:"fadeIn",//图片加载进来的时候效果
				placeholder:"img/grey.gif",//提前占位,真实图片还没加载进来的时候
				//event:"scroll",//触发的事件
				//threshold:"200",//距离屏幕多少像素提前加载
				//failure_limit:"20"//第一张加载失败后,后面的在屏幕上的是否继续加载
			});

		})
	</script>
</head>
<body>
	<div><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/viper_1.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></div>
	<div><img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574"></div>
</body>
</html>

 

里面的设置什么的具体的我都有说明了,下面说说里面的设置jquery.lazyload.js里面的参数吧

    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,//离进屏幕还有多少像素的时候加载
            failure_limit   : 0,//第一张进屏幕没加载后后续的可以再加载多少张
            event           : "scroll",
            effect          : "show",//show的时候是没效果,自然加载进来
            container       : window,
            data_attribute  : "original",
            skip_invisible  : true,
            appear          : null,
            load            : null,
            placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
        };

 

就看开头这些,这些是系统加载的时候参数的一些默认的值

也就是从外面调用的时候这些参数是我们所能进行设置的。

 

然后看下里面的data_attribute是设置什么的,还有就是demo里面的img标签里面没有src而是使用data-original进行代替,那我们再看看jquery.lazyload.js里面的底下代码

                    $("<img />")
                        .bind("load", function() {

                            var original = $self.attr("data-" + settings.data_attribute);
                            $self.hide();
                            if ($self.is("img")) {
                                $self.attr("src", original);
                            } else {
                                $self.css("background-image", "url('" + original + "')");
                            }
                            $self[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.attr("data-" + settings.data_attribute));

这个是其中的一部分,差不多大概意思就是在img图片加载的时候取得里面的$self.attr(“data-” + settings.data_attribute)的值,然后设置成img标签的src的值。

个人感觉这个插件还是挺强大的,而且加载进来的除了jquery之外对jquery.lazyload.js进行压缩之后大概只有4kb左右的大小!很强大,个人很喜欢!很多大网站都是使用这个插件的!

分享该文章:

相关文章:

  • 暂无相关文章