滚屏到相应位置才加载图片

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

               

一个页面图片太多了就有压力。但如果总是分页,每页鸡碎那么多,用户又会很烦。

可以滚屏到相应位置才加载图片,这样就皆大欢喜了。

原理如下:

1、使用jquery

2、需要动态加载的<img>增加一个属性(自己创建的)data-url=真正图片路径,而将src=一个只有1像素的透明GIF,style设置一个不停地转圈的等待图片作为背景,class="scl"

3、相应的jquery对凡是class="scl"的,当屏幕可见时,就将data-url来替换src,这样就可以实现动态加载。在用户这边看来,拉动屏幕到这些图片,会看见它们由一个不停地转动的图片变为真正想看的图片。


代码如下:

jquery.scrollLoading.js

/*! * jquery.scrollLoading.js * by zhangxinxu  http://www.zhangxinxu.com * 2010-11-19 v1.0 * 2012-01-13 v1.1 偏移值计算修改 position → offset*/(function($) {    $.fn.scrollLoading = function(options) {        var defaults = {            attr: "data-url"        };        var params = $.extend({}, defaults, options || {});        params.cache = [];        $(this).each(function() {            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);            if (!url) { return; }            //重组            var data = {                obj: $(this),                tag: node,                url: url            };            params.cache.push(data);        });        //动态显示数据        var loading = function() {            var st = $(window).scrollTop(), sth = st + $(window).height();            $.each(params.cache, function(i, data) {                var o = data.obj, tag = data.tag, url = data.url;                if (o) {                    post = o.offset().top; posb = post + o.height();                    if ((post > st && post < sth) || (posb > st && posb < sth)) {                        //在浏览器窗口内                        if (tag === "img") {                            //图片,改变src                            o.load(function() {                                o.removeClass("wimg");                            });                            o.attr("src", url);                        } else {                            o.load(url);                        }                        data.obj = null;                    }                }            });            return false;        };        //事件触发        //加载完毕即执行        loading();        //滚动执行        $(window).bind("scroll", loading);    };})(jQuery);

页面

    <style type="text/css">        .scl{background:url(/img/loading.gif) no-repeat center;}        .wimg{width:300px;height:200px;}    </style>
   

    <script type="text/javascript" src="/js/jquery.scrollLoading.js?ver=120308_3"></script>    <script type='text/javascript' src='http://cbjs.baidu.com/js/m.js'></script>

                <a href='/show.aspx?id=33210947&i=1' target='_blank'><img class="scl" src='/img/pixel.gif' data-url="Upload/2/PicMiniSize/2012-3-9/201203090246063866.jpg"/></a><br/><a href='/show.aspx?id=33210947&i=1' target='_blank'>成熟女人艳如桃……(第一百零五辑)</a>

<script type="text/javascript">    $(function() {        $(".scl").scrollLoading();    });</script>

这里有一个问题,就是有时真正图片的尺寸不一定能事先知道,所以一般不指定 width 和 height。但这里暂代图片只有1像素,不指定足够大的尺寸,根本看不到不停地转圈等待那个效果;但如果指定了,比如width=300px,height=200px,那真正图片出来后,也只有这么大,并且看起来变形。解决办法是,加载前指定width=300px,height=200px,加载完成后,再将这个指定去掉。

所以我们定义了一个CSS class :.wimg{width:300px;height:200px;},加载完成后去掉这个wimg。jquery.scrollLoading.js中有这么一句:

//图片,改变src                            o.load(function() {                                o.removeClass("wimg");                            });

参照文章

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


           

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值