在移动端实施图片分段加载

需求:
在移动端web应用内,每一屏(称之为slide)有其先后的顺序,自然地,根据slide的顺序,某些位于“后面”的图片不应该在页面第一次loading的时候加载,根据用户的动作(点击,上滑等)伺机加载图片是一种选择。

简单的替换:

<img class="p2Load" data="images/p2-star-3.png" src="" alt="">

原来放在src里的图片链接,现在移入data(随便什么名字)内,那么在加载dom的时候就不会去加载图片了。

所以接下来是在某个事件发生时,对class=pXLoad的所有元素进行图片加载。

function lazyLoad(page){
        
        var tmp = $('.p'+page+'Load').size();
                console.log(tmp);
                for( var i = 0 ; i < tmp ; i++ ){
                    var image = new Image();
                    image.onload = function(){
                        var me = i ;
                        return function(){
                            console.log(me);
                             $('.p'+page+'Load')[me].setAttribute('src', $('.p'+page+'Load')[me].getAttribute('data'));
                        }
                    }(i);
                    
                    var me = $('.p'+page+'Load')[i];
                    console.log(me.getAttribute('data'));
                    image.src = me.getAttribute('data');
                }
        
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,784评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,180评论 4 61
  • 1 武德二年,刘文静被杀的那一天,我把自己囚禁在议事厅,不久前我还身披铠甲在这给秦王府的将领们下达命令,而如今我却...
    聿修阅读 1,295评论 4 3
  • 我也曾是那么的幼稚,总以为自己拥有了全世界。后来才发现:原来这一切都是假的,不过都是我的幻想、不切实际罢了......
    长草颜阅读 228评论 0 0