`

加载图片时由模糊变清楚原理---类似QQ空间的相册的效果

    博客分类:
  • HTML
阅读更多

经常在好多网站看到图片刚开始加载时模糊,然后再慢慢变清楚;这个方式常用的是用一个JS方法实现;详细情况请诸位看客自己手动操作下,感受下这个效果;详细代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片由模糊变清楚</title>
</head>
<body>
<a href="http://www.forasp.cn/"><img src="http://www.forasp.cn/test/images/smail_showimg.jpg" name="myImage" width="901" height="567" id="myImage"  alt="图片由模糊变清楚" /></a><br />
<center><span id="showinfo">正在加载-------</span></center><!--这里是一个缩略图的图像,开始是按照源图像大小打开该图像--->
<script type="text/javascript">
var img = new Image();
img.src = "http://www.forasp.cn/test/images/big_showimg.jpg";
img.onload = function()
{//这里是要加载的源图像,document.getElementById('myImage').src = this.src;
document.getElementById('showinfo').innerHTML='加载完毕,<a href=images/big_showimg.jpg>查看原图</a>';
}
</script>
</body>
</html>
 

 

1
1
分享到:
评论
1 楼 lllt 2011-03-01  
这种效果实际上不需要任何js的

相关推荐

    加载图片时从模糊到清晰-在图片没加载完成的时候显示的是模糊的带马赛克的图片,加载完成才显示清晰图片.zip

    加载图片时从模糊到清晰-在图片没加载完成的时候显示的是模糊的带马赛克的图片,加载完成才显示清晰图片.zip

    Jquery图片查看器,jquery实现类似QQ空间相册查看效果

    在本文中,我们将深入探讨如何使用jQuery来创建一个图片查看器,从而实现类似QQ空间相册查看的效果。QQ空间的图片查看功能以其流畅的动画、便捷的导航和良好的用户体验而闻名,而通过jQuery这一强大的JavaScript库,...

    类似QQ相册效果

    在网页设计和开发中,实现“类似QQ相册效果”是指创建一个用户界面,其展示照片的方式类似于腾讯QQ空间中的相册功能。这种效果通常包括滑动浏览、缩略图预览、分页导航等特性,旨在提供流畅且互动性强的用户体验。要...

    jquery实现仿qq相册功能

    4. **Ajax交互**:如果相册包含大量的图片,一次性加载所有图片可能导致页面加载速度变慢。通过使用jQuery的Ajax功能,我们可以实现分页加载或按需加载图片,提高页面性能。例如,使用`$.ajax()`或`$.getJSON()`请求...

    《异步加载图片(一)》源码----仅实现异步加载 .

    这是博文《异步加载图片(一)》对应的源码,这段代码仅实现了异步加载,对于滑动时暂停,停划时加载的问题会在《异步加载图片(二)》中讲解,这篇文章的地址:...

    用js实现仿QQ空间相册源码

    总的来说,JavaScript实现的仿QQ空间相册系统需要结合HTML、CSS和JavaScript的综合运用,涉及前端开发的多个方面,包括布局设计、图片处理、动态加载、交互效果、网络通信以及性能优化。通过这样的实践,开发者不仅...

    加载图片时进度条

    "加载图片时进度条"这个主题就涉及到了如何在图片加载过程中提供反馈给用户,以提高其使用体验。在移动应用或网页中,当图片从服务器下载到用户的设备上时,显示一个进度条可以有效地告诉用户操作正在进行,并且有助...

    android显示多item多图片的viewpager,选中项居中变大,非选中项模糊变小

    综上所述,实现“显示多item多图片的`ViewPager`,选中项居中变大,非选中项模糊变小”的功能,需要结合自定义适配器、图片加载库、动画效果以及图片处理技术。通过合理的设计和优化,我们可以创建出既美观又高效的...

    android仿QQ相册滑动多选

    在Android开发中,"android仿QQ相册滑动多选"是一个常见的需求,它涉及到UI设计、触摸事件处理、图片加载以及数据管理等多个方面。在这个项目中,开发者需要实现一个可以滑动浏览相册,并且支持多选照片的功能,与QQ...

    进行模糊查询+多选功能的下拉框(select) 模糊加载

    "进行模糊查询+多选功能的下拉框(select) 模糊加载"是一个针对前端表单元素优化的实践,旨在提供更好的用户体验。传统的HTML `&lt;select&gt;` 元素虽然简单易用,但其功能相对有限,无法满足复杂的用户需求,例如模糊...

    android 图片模糊效果

    在Android开发中,图片模糊效果是一种常见的视觉设计手法,用于增强界面的美观度和用户体验。本文将深入探讨如何在Android应用程序中实现图片模糊效果,并基于提供的`BlurEffectForAndroidDesign-master`压缩包文件...

    jQuery QQ空间响应式相册插件

    《jQuery QQ空间响应式相册插件》 在当今网页设计中,响应式布局已经成为不可或缺的一部分,它使得网站能够在各种屏幕尺寸的设备上提供良好的用户体验。对于图片展示来说,响应式相册插件更是尤为关键,它能确保...

    懒加载案例lazyload

    - **数据属性**:为`&lt;img&gt;`添加一个`data-src`或类似的数据属性,存储真实图片的URL,等到需要加载时再替换`src`。 3. **CSS优化**: - **隐藏未加载元素**:使用CSS将未加载的图片设置为不可见,如`display: ...

    Android应用源码之仿 [Tidy相册] 背景模糊效果.rar

    在Android开发中,实现类似[Tidy相册]的背景模糊效果是一种常见的视觉设计技巧,它能够为用户界面增添层次感和专业性。本压缩包文件包含了一份源码,旨在帮助开发者学习如何在自己的应用中复制这种效果。让我们深入...

    loading(各种AJAX加载图片)

    "loading(各种AJAX加载图片)"这个主题,主要关注如何利用AJAX实现图片的异步加载,以及在加载过程中展示各种加载效果,提升用户体验。 1. **AJAX基础** - **异步性**:AJAX的核心是XMLHttpRequest对象,它使得...

    Android应用源码之仿 [Tidy相册] 背景模糊效果.zip

    本示例“仿[Tidy相册]背景模糊效果”提供了实现类似[Tidy相册]应用中的背景模糊效果的源码,这是一种流行的设计手法,旨在增强应用的视觉吸引力。下面我们将深入探讨这个Android应用源码中的关键知识点。 1. **图片...

    GridView异步加载网络图片

    在实际应用中,我们经常需要在GridView中加载网络图片,以实现图文混排的效果。异步加载网络图片能提高用户体验,避免因图片加载导致的UI卡顿。以下将详细讲解如何在GridView中实现这一功能。 1. **异步加载基础** ...

    封装Picasso加载图片指定大小 旋转 高斯模糊

    那么图片加载优化层面就会有一堆点需要考虑,它决定一款应用是否足够轻盈: 如何开发一款本地的行之有效,性能卓越的图片加载库(优化资源竞争?封装简洁的接口?强大的图片处理功能?),亦或是如何选择开源优秀的图片...

    Javascript实现图片加载从模糊到清晰显示的方法

    在进行网络相册图片加载功能的设计时,用户体验至关重要。传统的图片加载方式存在一些问题,如在网络较慢或者图片较大时,页面会出现空白等待,导致用户无法预览照片的内容,这对用户体验非常不利。为了解决这些问题...

    Android高级应用源码-Gallery相册浏览.rar

    - 传统上,Android的GridView常用于展示图片相册,但随着RecyclerView的普及,现在更多地使用自定义布局实现类似功能。另外,Gallery相册可能使用HorizontalScrollView来实现水平滑动浏览,以提供更接近原生Android...

Global site tag (gtag.js) - Google Analytics