jQuery页面滚动图片等元素动态加载实现

最新推荐文章于 2020-01-02 11:08:22 发布

三人禾羽廾

最新推荐文章于 2020-01-02 11:08:22 发布

阅读量675

点赞数

分类专栏： jquery 文章标签： jquery 图片动态加载

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、关于滚动显屏加载

常常会有这样子的页面，内容很丰富，页面很长，图片较多。比如说光棍节很疯狂的淘宝商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。乖乖，估计黄花都变成黄花菜了。所以，我们得做点什么，避免这种糟糕的状况发生。

目前很流行的做法就是滚动动态加载，显示屏幕之外的图片默认是不加载的，随着页面的滚动，这个要显示图片的区域进入了浏览器可是窗口范围，则触发图片的加载显示。这种做法的好处是，一是页面加载速度快（浏览器转啊转的圈圈或是进度条很快就玩完了），二是节约了流量，因为不可能每个用户浏览页面时从头滚到尾的。

看上去这种技巧有些技术门槛，其实很简单的。我们需要一个滚动事件，然后判断元素是否在浏览器窗口，然后，显示图片（或是其他元素）就可以啦。我在jQuery库下写了个实现此效果的插件，下面就将简单展示讲解此插件的使用以及滚动动态加载的实现。

二、jQuery滚动加载插件scrollLoading

虽然只有几十行代码，但是为了方便使用，我还是将其插件化了。插件名为jquery.scrollLoading.js，您可以狠狠地点击这里下载（右键 – [目标|链接]另存为），或是点击这里下载mini压缩版的。

demo
您可以狠狠地点击这里：jQuery滚动加载图片等demo

demo页面中似乎有段破坏和谐的HTML片段，那是动态加载HTML后的效果，也就是说，此scrollLoading不仅可以用来滚动加载图片，Ajax load页面什么的也是可以的。

三、scrollLoading使用

不管怎样，首先调用jQuery库文件，还有jquery.scrollLoading.js，您可以直接在页面的某处添上如下的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>

此插件的方法名就是scrollLoading，所以，直接：包装器.scrollLoading();就可以实现滚动加载效果了，简单的吧。如下：

$(".scrollLoading").scrollLoading();

表示所有class为scrollLoading的元素绑定了滚动加载的方法。
当然，不可能真的就如此简单，我们还需要做点小动作的。元素默认是不加载的，那么真正的加载地址显然要预先在元素上放置的，例如新浪微博默认把头像地址绑在了一个自定义的”dynamic-src”属性上，见下图：
新浪微博绑定真实图片地址自定义属性张鑫旭-鑫空间-鑫生活

在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为”data-url”，此属性值设为真实的图片（或页面）地址就可以了。例如下面：

<div class="scrollLoading" data-url="loaded.html">加载中...</div>

会在滚动时加载名为loaded.html的页面，并自动替换里面的内容。

对于常用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现很惊悚的红叉叉。 IE浏览器下的红叉叉张鑫旭-鑫空间-鑫生活。我的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），同时可以透出后面加载中gif动画图片，当滚动加载的时候直接把此gif图片替换掉。于是，对于图片，可能就有类似下面的代码：

<img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" />

四、scrollLoading可选参数

参数	默认	释义
attr	data-url	获取元素加载地址的属性名
container	$(window)	滚动的容器。默认为$(window)，也就是默认的网页滚动。
callback	$.noop	回调。元素动态加载完毕后执行的回调函数。其中回调函数的上下文`this`就是当前DOM元素。注意：如果无法获取元素加载地址，则不执行动态加载，但是会触发回调。在某些需求下，您可以缺省url值，仅仅触发回调。

新demo中绑定JavaScript代码如下：特意做了个container和callback参数使用的demo，您可以狠狠地点击这里：普通div元素中的动态滚动加载demo

$(".scrollLoading").scrollLoading({
    container: $("#zxxMainCon"),
    callback: function() {
        this.style.border = "3px solid #a0b3d6";	
    }
});

本文转载地址：http://www.zhangxinxu.com/wordpress/?p=1259