zoukankan      html  css  js  c++  java
  • 图片懒加载

    临时想到点谢谢,以后再慢慢完善。

    001.先看这个博客http://www.cnblogs.com/Leo_wl/p/3526254.html

    1.图片预先加载的一个思路,

    比如说焦点大图,在第一张大图加载后,我们可以预先加载图片放到隐藏域了,这样就做到了图片的预先下载。

    可以看这个地址。

    http://www.qdfuns.com/notes/40851/6323f6be50cf5b6857426fabd4b52779.html

    2.可见加载。

    当网页拉到对应的scroll之后,在加载对应的图片。和瀑布流中的加载有相似的地方。

    function isVisiable(elem) {
      if (!elem) return false;
      // console.log(($(window).scrollTop()+"::"+($(elem).offset().top+$(elem).outerHeight()))+"::"+(($(window).scrollTop()+$(window).height())+"::"+$(elem).offset().top))
      return ($(window).scrollTop() <= ($(elem).offset().top + $(elem).outerHeight())) && (($(window).scrollTop() + $(window).height()) > $(elem).offset().top);
    }
    
    var lazyQueue = [
    	'800' : [
    		'.js_ad1','.js_ad2'
    	],
    	'900' : [
    		'.js_ad3','.js_ad4'
    	]
    ];
    //先把对应的img放入到body中,然后设置div为display:none然后监听scroll监听,如果发现可以展示了,就展示图片
    
    $(window).bind("scroll", function() {
    	var timeFlag;
    	if(timeFlag){
    		clearTimeout(timeFlag);
    	}
    	timeFlag = setTimeout(function() {
    		for (var key in lazyQueue) {
    			if (lazyQueue.hasOwnProperty(key)) {
                    var item = lazyQueue[key];
                    if (!item) continue;
                    for (var j = 0; j < item.length; j++) {
                        var mItem = item[j];
                        if (mItem && !mItem.loaded && isVisiable(mItem.elem)) {
                            if (mItem.loaded === false) {
                                mItem.cb && typeof mItem.cb == 'function' && mItem.cb();
                                //设置为这个img为block
                                mItem.loaded = true;
                            } else {
                                mItem = null;
                            }
                        }
                    }
                }
    		}
    	})
    })
    

      

  • 相关阅读:
    selenium
    selenium
    selenium
    selenium-控制浏览器操作
    selenium元素定位
    selenium测试-open chrome
    selenium环境搭建
    selenium简介
    74 计算机图形学开源处理库
    73 QT编程入门
  • 原文地址:https://www.cnblogs.com/coding4/p/7354261.html
Copyright © 2011-2022 走看看