`
pumaboyd
  • 浏览: 248672 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【转】解决大量图片造成的页面延迟

 
阅读更多

当页面上存在大量图片的时候,图片下载可能造成页面延迟。下面介绍一种解决这种问题的方法:

function regImg(e,src){
    
if(!window.imgHash) window.imgHash = new Object();
    
var a = imgHash[src];
    
e.onerror=null;
    
if(a==null) {
        
e.style.display="none";
        
a=imgHash[src]=[];
        
a[0]=new Image();
        
a[1]=e;
        
a[0].onload=function(){setImges(a)};
        
a[0].src=src;
    
}else{
        
if(a[0].readyState=="complete")
            
e.src=src;
        
else{
            
e.style.display="none";
            
a[a.length]=e;
        
}
    
}
}

function setImges(a){
    
for(var i=1;i<a.length;i++){
        
a[i].src=a[0].src;
        
a[i].style.display="";
    
}
    
a.length=1;
    
a[0].onload=null;
}


用法举例:

<img src="about:blank" onerror="regImg(this,'http://photo8.yupoo.com/20070625/121507_1495531449_m.jpg');" />

程序分析:

1、页面加载的时候,页面上的图片地址都是空白页面地址,那么也就是图片加载会出错,这时候就会以JS方式调用regImg来加载和显示图片。
2、首先,建立一个imgHash页面hash对象。
3、如果要加载的图片已经存在在imgHash对象里面,如果存在直接调用显示,如果还未加载完成,就将该位置的图片显示排队。
4、如果要加载的图片在imgHash对象里面不存在,创建Image对象并加载src地址的图片,并将该图片的信息设置到imgHash对象。
5、当src地址的图片加载完成,就将该图片地址全部是该src的显示队列全部显示出该图片。
6、由于该程序使用了页面hash对象缓存图片对象,所以该程序不但解决了图片下载可能造成页面延迟问题,还可以避免重复加载图片。建议在发现图片下载造成页面延迟的情形下使用。

分享到:
评论

相关推荐

    图片延迟加载效果 很不错的

    在网页设计中,尤其是含有大量图片的页面,这种技术能显著提高页面加载速度,改善用户体验。它的工作原理是,只加载用户当前可视区域内的图片,当用户滚动页面时,才按需加载那些即将进入可视区域的图片。这样,可以...

    javascript图片延迟加载实现方法及思路

    实际应用中,单纯使用原生JavaScript实现上述功能可能会遇到性能瓶颈,尤其是在处理大量图片或频繁滚动时。为此,可以采用专门的图片懒加载库,如文中提到的jQuery插件lazyload,来优化这一过程。这类库通常会封装好...

    LazyLoad 延迟加载(按需加载)

    延迟加载(LazyLoad),也称为按需加载,就是为解决这一问题而诞生的一种高效策略。通过延迟加载,网页可以在用户滚动时仅加载可视区域内的内容,而不是一次性加载所有资源,从而节省带宽,提升页面加载速度,优化...

    JS图片播放器-商用级别

    9. **性能优化**:考虑到大量图片可能会对页面性能造成影响,播放器可能采取了优化策略,如延迟加载、图片压缩等。 10. **模块化与可维护性**:为了代码组织和后期维护,项目可能采用了模块化设计,如使用CommonJS...

    异步加载图片

    "异步加载图片"是一种高效的技术策略,用于优化用户体验,避免因为加载大量图片而造成应用性能下降或用户界面卡顿。下面我们将深入探讨这个话题。 首先,我们要理解什么是异步加载。在计算机科学中,异步操作是指一...

    懒加载图片

    在网页设计中,如果页面上包含大量图片,一次性加载所有图片可能会导致页面加载速度变慢,甚至造成浏览器卡顿,尤其是在移动设备上。懒加载就是为了解决这个问题而提出的。 在懒加载图片的实现过程中,通常会遵循...

    ASP.NET图片预加载 实例

    在ASP.NET开发中,图片预加载是一项重要的技术,它能够改善用户体验,特别是在处理大量图片或者图像密集型的网站时。预加载技术的核心是预先载入用户可能会需要的图片,这样当用户滚动页面或点击某个链接时,图片...

    图片墙加强

    6. **性能优化**:考虑到大量图片可能会对服务器和客户端造成压力,可以对图片进行压缩,使用WebP或其他高效图片格式,或者利用服务端和CDN进行静态资源分发,以减少延迟。 7. **SEO优化**:对于网页应用,图片墙的...

    68ecshop__ECSHOP图片延时加载免费插件

    这可能导致页面加载速度慢,尤其是当页面中包含大量图片时。而图片延时加载则只在用户滚动到图片所在位置时才开始加载,这样可以显著减少首屏加载时间,提升页面加载速度。 二、ECSHOP图片延时加载插件的实现 1. *...

    编程开发-综合控件-图片查看特效(js代码) 免费版.zip

    在编程开发领域,图片查看特效是提升用户体验的重要一环,特别是在网页或应用程序中展示大量图片时。本资源“编程开发-综合控件-图片查看特效(js代码) 免费版.zip”提供了一套基于JavaScript的图片查看器解决方案,...

    RandomImage-master_图床_php_

    这个项目可能是为了解决网站或应用在处理大量图片时的效率问题,通过异步加载,可以提高用户体验,避免因加载大量图片而造成的页面延迟。 【描述】中的“异步加载图片”指的是,当用户打开网页时,不会一次性加载...

    uni-app:从运行原理上面解决性能优化问题

    5. **减少一次性渲染的节点数量**:分批加载数据可以降低初次渲染的压力,避免一次性传输大量数据造成通讯延迟和页面卡顿。 6. **减少节点嵌套层级**:深层嵌套的节点会增加内存占用和遍历时间,应尽量简化结构。 ...

    浅谈H5前端性能测试实践1

    解决白屏问题,一个常见方法是页面直出改造,即在服务器端预加载首屏所需的CSS、JavaScript和接口数据,生成一个完整的HTML响应,从而减少网络延迟,实现秒开效果。 三、卡慢问题分析与解决 1. **假性卡顿**:有时...

    opti简单透明的媒体查看器

    在图片加载速度方面,opti采用了延迟加载(Lazy Loading)策略,只有当图片进入视口时才会真正加载,这样极大地优化了网页性能,特别是对于拥有大量图片的页面。此外,为了适应不同的网络环境,opti还支持图片质量的...

    jquery 瀑布流实例最流行瀑布流图片展示

    1. **响应式设计**:由于瀑布流布局通常用于展示大量图片,所以必须考虑网页在不同设备和屏幕尺寸下的表现。这需要利用CSS3的媒体查询(Media Queries)和流式布局(Fluid Grids)来实现响应式设计,确保在手机、...

    JavaScript前端图片加载管理器imagepool使用详解

    尽管延迟加载技术优化了加载过程,但仍然可能会一次性加载大量图片,尤其是当页面中有大量图片需要加载时。此时,就需要一个缓冲机制来控制图片的加载并发数,这就是imagepool的主要作用。 #### 三、imagepool的...

    秒杀系统:第6章 页面级高并发秒杀优化(Redis缓存+静态化分离)

    3. **边缘计算**:通过CDN网络进行页面内容的边缘计算,将计算任务下放到离用户更近的节点,降低延迟,提高用户体验。 4. **缓存策略**:对静态资源设置长期缓存策略,减少对服务器的请求。 5. **版本控制**:更新...

    pymake.zip

    在创建数据集的过程中,pymake可以帮助用户快速生成大量图片,这对于训练图像识别、图像分类等模型非常有帮助。值得注意的是,在使用爬虫工具时,务必遵守互联网使用规范,尊重网站的robots.txt文件,避免对目标网站...

    JS向上滚动有停顿--(包含5个)

    4. **图片加载**:如果图片没有正确地延迟加载或者懒加载,滚动到页面底部时,大量图片同时加载会消耗大量资源,造成停顿。使用懒加载技术可以解决这个问题,只在图片进入视口时才开始加载。 5. **CSS动画**:过度...

Global site tag (gtag.js) - Google Analytics