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

用new Image()预先加载图片真的有用吗?

阅读更多
经常会用到在网页上交替显示图片。很多推荐的作法是用new Image() 预先装载图片。但是用new Image()真的有用吗?

试验:

在后台放一个过滤器捕捉所有 /* 的请求:

doFilter里面简单的打印请求的URL:


HttpServletRequest httpRequest = (HttpServletRequest) request;
System.out.println("requets url: " + httpRequest.getRequestURI());
chain.doFilter(request, response);




html代码:

<body>
<script>
	var t1 = new Image();
	t1.src = 'ico_unchecked.gif';
	
	function change(){
		im.src = t1.src;
	}
</script>
<button onclick="change()">change</button>
<img id="im" src="ico_checked.gif">
</body>



可以看到打印了三次url。html页面的请求一次。t1.src设值的时候一次。<img src="">的时候一次。

我想这时候如果按按钮改变页面上的图片,应该不会再从服务端载图片了,因为缓存里面已经有了嘛。可是点的时候过滤器仍然是有打印出URL!

看来只要image对象的src一被改变就会发出请求。那预先装载图片不是等于没用吗?


分享到:
评论
4 楼 hax 2007-09-20  
注意,IE其实存在图片缓存bug,但是通常它并不会导致一次新的请求,只是会产生多次的WinNET API调用,效果就是有轻微的闪烁。

此外,Filter(AlphaImageLoader)和VML的image,都分别存在一些缓存上的问题(Shame M$)。但是这里并没有涉及到。
3 楼 hax 2007-09-20  
你的测试有误。

new Image()绝对可以起到预取作用。

之所以你测试中会有新的请求,估计是以下原因之一:

A. 你的浏览器设置存在问题。例如在IE中默认是“自动”而你可能改成了“每次访问都检查网页更新”。

B. 你的服务器端程序有问题。例如发出了禁止Cache的头。

C. RPWT
2 楼 sp42 2007-09-20  
推荐CSS Background的方式
1 楼 scud 2007-09-20  
很多server(例如apache)会对请求进行分析, 如果根据 last modified time 判断文件没有改变, 则返回 "304 - 未修改".

请求相同的url并不表明传输回去的内容大小也相同

相关推荐

    JS实现图片预加载

    图片预加载是指在浏览器中预先加载图片,以提高用户体验和减少流量消耗的一种技术。JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载,并且可以结合容器的宽和高,按照一定的缩放比例使图片显示出来。 ...

    Qt 动态图片的加载

    5. **性能优化**:对于大量图片的处理,可以使用QImageReader类一次性读取多个图片,或者使用QPixmap对象的`scaled()`方法预先缩放图片,减少内存占用和显示时间。 6. **内存管理**:确保在不再需要图片时释放资源...

    图片预加载loading

    "图片预加载loading"就是这个概念的具体应用,它通常会在页面的主要内容加载之前,预先加载那些位于指定区域内的图片,确保用户在浏览时能快速看到完整的视觉效果。 实现图片预加载的方式多种多样,其中一种常见的...

    图片预加载js使用简单

    它能够提高用户体验,减少用户等待时间,因为浏览器在页面加载时会预先下载部分或全部图片,即使这些图片在当前视口中并未显示。本文将详细讲解图片预加载JS的使用方法,以及如何通过jQuery的lazyload插件实现这一...

    图片预加载、占位背景图jquery plugin

    在网页设计中,如果图片没有预先加载,当用户滚动页面或切换到含有图片的区域时,可能会出现闪烁或者延迟加载的现象。这种用户体验不佳的情况可以通过预加载来改善。jQuery预加载插件的工作原理是,创建`&lt;img&gt;`元素...

    简单的图片懒加载实现

    7. **图片尺寸处理**:在图片未加载前,可以预先设定一个固定尺寸,避免页面因图片加载导致布局跳动。当图片加载完成后,可以使用CSS调整图片大小。 8. **性能优化**:为了避免频繁的滚动事件触发,可以使用`...

    图片预加载

    在网页设计中,图片预加载是一项重要的优化技术,它的主要目的是提高用户体验,通过预先加载用户可能需要的图片,使得图片可以更快地展示出来,避免了用户在浏览网页时因为图片加载延迟而产生的等待感。本篇文章将...

    ASP.NET图片预加载 实例

    预加载技术的核心是预先载入用户可能会需要的图片,这样当用户滚动页面或点击某个链接时,图片可以快速地显示出来,避免了因网络延迟而造成的视觉空白。在本实例中,我们将探讨如何在ASP.NET环境中实现图片的懒加载...

    jquery图片预加载+等比例缩放

    使用jQuery,我们可以创建一个函数,遍历需要预加载的图片URL,然后使用`new Image()`创建一个图片对象,并将其`src`属性设置为图片URL。这样,浏览器就会开始下载图片数据,即使图片尚未在页面上显示。 **3. 实现...

    FLASH+XML加载图片并分页显示

    6. **优化与性能**:在实际应用中,考虑到用户体验和性能,可能需要实现预加载机制,即在当前页面之外的图片预先加载一部分,以减少用户等待时间。同时,图片加载后应缓存,避免重复加载。 7. **响应式设计**:随着...

    通过jQuery预加载图片的方法共1页.pdf.zip

    预加载图片是指在用户实际需要之前,利用JavaScript库,如jQuery,预先加载页面中可能需要的图片资源。这种方法有助于确保图片在用户滚动到相应位置或者点击某个链接时已经准备好,避免了页面加载时的延迟感。 标题...

    jQuery 图片预加载技术实现多款图片切换效果.zip

    例如,我们可以预先加载一组图片,然后使用`.fadeIn()`和`.fadeOut()`方法来实现无缝切换: ```javascript $(document).ready(function() { var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; preload...

    sqlserver-image图片导出

    "sqlserver-image图片导出"这个话题涉及到如何从SQL Server数据库中提取并保存这些图像数据到本地文件系统。下面我们将深入探讨这个过程,以及可能遇到的相关知识点。 1. **BLOB数据类型**: SQL Server中的`image...

    【JavaScript源代码】javascript实现图片预加载和懒加载.docx

    预加载是指在页面加载过程中预先加载后续可能用到的资源,以便于后续使用时能够直接从浏览器缓存中获取,而不是重新发起网络请求。通过这种方式,可以显著减少用户等待的时间,提升整体体验。 ##### 应用场景示例 ...

    jQuery图片预加载代码

    例如,创建一个函数`preloadImages()`,遍历需要预加载的图片URL数组,使用`new Image()`创建一个Image对象,并将其src属性设置为图片URL,这样图片就会在后台开始加载。 ### 6. 注意事项 - **资源顺序**:预加载...

    显示不同格式图片的例子

    - 动态加载图片:如果需要在运行时加载图片,可以使用OpenFile对话框让用户选择图片文件,然后按照上述方法加载。 以上就是关于在MFC对话框中显示不同格式图片的基本知识点。通过理解这些原理和实践技巧,开发者...

    flex 动态载入外部图片

    - 考虑到性能,可以预先加载图片到缓存,或者使用预加载技术。 - 如果图片数量多,考虑使用图像精灵(SpriteSheet)或位图缓存(BitmapCache)来提高渲染效率。 4. **常见问题及解决方案**: - **加载失败**:...

Global site tag (gtag.js) - Google Analytics