zoukankan      html  css  js  c++  java
  • 滚屏到相应位置才加载图片

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

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

    原理如下:

    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{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{300px;height:200px;},加载完成后去掉这个wimg。jquery.scrollLoading.js中有这么一句:

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

    参照文章

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


  • 相关阅读:
    Codeforces 1255B Fridge Lockers
    Codeforces 1255A Changing Volume
    Codeforces 1255A Changing Volume
    leetcode 112. 路径总和
    leetcode 129. 求根到叶子节点数字之和
    leetcode 404. 左叶子之和
    leetcode 104. 二叉树的最大深度
    leetcode 235. 二叉搜索树的最近公共祖先
    450. Delete Node in a BST
    树的c++实现--建立一棵树
  • 原文地址:https://www.cnblogs.com/leftfist/p/4258074.html
Copyright © 2011-2022 走看看