当前位置: 代码迷 >> JavaScript >> javascript代码图片随荧屏滚动异步加载
  详细解决方案

javascript代码图片随荧屏滚动异步加载

热度:278   发布时间:2012-08-31 12:55:03.0
javascript代码图片随屏幕滚动异步加载

在生成静态化的页面时,对页面的HTML文件进行IMG标签的处理,并加入图片异步加载的JS代码,即可以了

?

class img_delay_loader_modifier{
    function delay( &$content ){
        if(stripos($content,'</body>')===false){
            return $content;
        }
        //$baseurl 获取主站的根目录
		$system = &$GLOBALS['system'];
		$baseurl = $system->base_url();
        $content = preg_replace('/(<img[^\>]*\s+src=)(["\'|][^"\'|]+["\'|])(.*?\>)/is'
							,'$1"'.$baseurl.'statics/transparent.gif" init_src=$2$3',$content);
		$scripts = <<<EOF
<script>
window.addEvent('domready',function(){

        var forInit = $$('img[init_src]');
        var win = window;
        
        (function(){
            if(!forInit.length)return false;
            var loop = arguments.callee;
            var loop = function(){
                forInit.each(function(item,index){
                    if(!item)return;
                    if(((item.getPosition(win).y-win.getScrollTop())<win.getSize().y)){
                        if(item.get('init_src')){
                            item.set('src',item.get('init_src')).removeProperty('init_src')
                        }
                        // forInit.erase(item);
                    }
                    
                    if(index == (forInit.length-1)){loop.delay(200);}
                   
                });
            }
            loop.delay(200);
        })();

});
</script>
EOF;
		$content = str_replace('</body>',$scripts.'</body>',$content);
		return $content;
    }
}
?

?

  相关解决方案