`
yukar
  • 浏览: 128307 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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;
    }
}
 

 

1
0
分享到:
评论

相关推荐

    javascript图片随滚动条异步加载

    JavaScript图片随滚动条异步加载是一种优化网页性能的常见技术,尤其在处理大量图片或大容量内容时。这种技术能够显著提升网页加载速度,改善用户体验,因为它只在用户实际需要时才加载图片,而不是一次性加载整个...

    网页图片随滚动条加载

    总结起来,网页图片随滚动条加载是提升网页性能、优化用户体验的有效手段,利用AJAX和异步加载技术,可以有效地减少页面初始化的加载时间,提高网页的响应速度,特别是在图片资源丰富的网页上,效果尤为明显。

    lazyload异步加载图片

    **懒加载(Lazy Load)异步加载图片技术详解** 懒加载是一种优化网页性能的技术,它主要应用于图片或者视频等大体积资源的加载。在网页初次加载时,只加载视口内的图片,当用户滚动页面,即将进入视口的图片才会被...

    上拉滚动条 异步加载组件

    `iScroll`是一个轻量级、高性能的JavaScript滚动插件,支持触摸设备和传统鼠标操作。在提供的文件`iscroll_V4.2.5`中,我们可以找到`iScroll`的旧版本4.2.5。`iScroll`不仅适用于滚动条,还能处理固定定位元素、弹性...

    JS异步加载图片

    在JavaScript(JS)中,异步加载图片是一种优化网页性能的技术。它允许浏览器在不影响页面主要功能的情况下,按需或后台加载非关键资源,如图片。这样可以减少页面初次加载的时间,提高用户体验,特别是对于含有大量...

    jQuery选项卡切换图片异步加载代码.zip

    本压缩包"jQuery选项卡切换图片异步加载代码.zip"提供了实现这一功能的代码示例。 首先,我们需要理解jQuery选项卡的基本概念。选项卡是一种UI组件,它将内容分隔到不同的部分(称为“选项卡”),用户可以点击不同...

    图片异步加载

    在网页开发中,图片异步加载通常通过JavaScript库来实现,如jQuery及其插件`jquery.lazyload.js`。这个插件是专门为延迟加载图片设计的,它监听用户的滚动事件,只有当图片进入视口(即用户可以看到的区域)时,才会...

    异步加载图片的示例

    在IT行业中,异步加载图片是一项重要的优化技术,特别是在网页和移动应用开发中。它能够显著提高用户体验,因为用户不再需要等待所有图片完全加载才能查看页面内容。本示例程序展示了如何实现这一功能,适用于“mars...

    JS读取本地文件夹和图片异步加载(图片LazyLoad)

    在本文中,我们将探讨如何使用JavaScript读取本地文件夹,并实现图片的异步加载,即图片的LazyLoad技术。 一、JavaScript读取本地文件夹 在浏览器环境中,出于安全考虑,JavaScript无法直接访问用户的本地文件系统...

    图文混排 异步加载

    本篇将详细阐述这个主题,重点关注Handler、ListView以及异步加载图片的核心技术。 1. **图文混排**: 图文混排是指在同一个布局中同时展示文本和图像,使内容更加丰富和生动。在Android中,我们可以使用`TextView...

    jquery 异步加载页面

    在实际应用中,我们通常结合特定的用户交互(如滚动到底部)来触发异步加载。jQuery的`$(window).scroll()`事件监听页面滚动,`$(document).ready()`确保DOM加载完成后再执行相关代码。 ```javascript $(document)....

    jQuery实现的图片异步加载和预加载特效源码.zip

    本资源“jQuery实现的图片异步加载和预加载特效源码.zip”提供了一种利用jQuery实现图片的异步加载和预加载功能的代码示例,这对于优化网页性能和用户体验至关重要。 首先,我们来理解一下异步加载的概念。在传统的...

    分页和异步加载

    例如,在博客园图片应用中,可能有大量的图片资源,使用分页和异步加载可以避免一次性加载过多图片导致页面卡顿。GridView组件在Android开发中常用于展示数据列表,分页和异步加载也能在其中发挥重要作用,提升应用...

    拖动滚动条自动加载图片页面

    6. **异步加载(Ajax)**:在不刷新整个页面的情况下,后台获取并插入新数据。 7. **加载提示**:如`loading.gif`,用于显示加载状态,提升用户体验。 以上就是关于“拖动滚动条自动加载图片页面”及相关技术的详细...

    ztree异步加载

    ZTree的异步加载机制是其核心功能之一,它的主要思想是按需加载,即在用户滚动、展开节点或进行其他操作时,只加载当前需要显示的子节点,而不是一次性加载所有数据。这种方式极大地提高了页面的加载速度,减少了...

    手机移动端Tab选项卡切换带下拉数据异步加载js插件

    总结,手机移动端Tab选项卡切换带下拉数据异步加载js插件是一种高效的页面交互解决方案,它通过结合Tab选项卡、下拉加载和异步加载技术,提升了移动应用的性能和用户体验。开发者可以通过理解这些核心概念和技巧,...

    asp.net Ajax异步加载图片,瀑布流加载图片

    异步加载图片的关键在于JavaScript的事件监听和AJAX请求。通常,当用户滚动到页面底部时,JavaScript会监听滚动事件,然后发送一个AJAX请求到服务器,请求更多的图片数据。服务器收到请求后,返回新的图片信息,...

    ExtJS构造动态异步加载

    而动态异步加载(Asynchronous Loading)则是在用户滚动或交互时按需加载数据,降低了初始加载的时间,提升了性能。ExtJS的树组件支持这种加载方式,只在需要时请求服务器获取节点数据。 接下来,我们关注树形结构...

    ASP.NET treeView异步加载节点

    在一些场景下,由于数据量大或者为了提高用户体验,我们可能会选择异步加载(Ajax)的方式来加载TreeView的节点。这种方式可以在用户滚动或展开节点时动态获取并显示数据,而不是一次性加载所有数据,从而减少页面...

    jQuery选项卡上下滚动切换图片异步加载选项卡

    在本文中,我们将深入探讨如何使用jQuery来实现一个选项卡上下滚动切换的图片异步加载功能,这在网页设计中是一种常见的交互效果。首先,让我们理解这个特效的主要组成部分:选项卡、滚动按钮、图片异步加载和用户...

Global site tag (gtag.js) - Google Analytics