`

加载图片时由模糊变清楚原理---类似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的

相关推荐

    类似QQ空间相册的效果

    标题中的“类似QQ空间相册的效果”指的是创建一个与QQ空间相册类似的用户界面和交互体验。QQ空间相册是腾讯公司推出的社交网络服务的一部分,它允许用户上传、分享、管理个人照片,并提供了丰富的展示方式,如幻灯片...

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

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

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

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

    类似QQ相册效果

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

    jQuery js-实现高仿朋友圈QQ空间图片相册查看效果插件.zip

    综上所述,实现这个"jQuery js-实现高仿朋友圈QQ空间图片相册查看效果插件"涉及的技术点包括:jQuery选择器和事件处理、CSS3动画和布局、响应式设计、触摸事件处理、图片懒加载以及jQuery插件开发。通过这些技术的...

    QQ空间相册效果

    在创建QQ空间相册效果时,主要涉及以下几个关键技术点: 1. **jQuery库**:jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个项目中,jQuery用于控制相册的展示和交互,比如...

    jquery实现仿qq相册功能

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

    类似QQ相册的代码

    QQ相册是一款流行的在线照片管理和分享应用,类似于我们熟知的QQ空间相册功能。这个代码实现了一个简单的QQ相册效果,旨在帮助开发者理解和构建类似的功能。下面我们将详细探讨这个项目中涉及的关键技术点和实现原理...

    imgblurin实现图片模糊加载的效果

    "imgblurin" 是一个JavaScript库,专门用于实现图片模糊加载的效果,旨在提高页面加载速度的同时,提供优雅的视觉过渡。这个库将渐变效果与图片加载巧妙地融合在一起,使得用户在图片完全加载之前就能看到一个模糊的...

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

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

    js仿QQ空间相册照片展示效果

    在JavaScript编程领域,实现类似QQ空间相册照片展示效果是一种常见的需求,它可以为用户带来更加沉浸式的浏览体验。本项目的核心在于实现图片的点击放大、左右切换以及过渡动画,这些都是前端开发中的重要技能。下面...

    仿 [Tidy相册] 背景模糊效果

    【仿 Tidy相册 背景模糊效果】是一个Android应用开发项目,旨在实现与[Tidy相册]类似的背景模糊特效。在Android开发中,这种效果通常用于提升用户体验,为用户界面增添美观和专业感。以下将详细讲解如何在Android...

    加载图片时进度条

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

    图片加载器

    在Android应用开发中,图片加载是一项关键任务,尤其是在处理大量图片时,如在相册、图库或瀑布流展示等场景。"图片加载器"是一个专门为解决此类问题设计的组件,其目标是确保在加载大量图片时,应用程序的内存使用...

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

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

    android 图片模糊效果

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

    qq相册点击图片放大效果图,css3+hthml5+js轻松实现,代码简洁易懂。

    在网页设计中,提供良好的用户体验往往涉及到图片的展示方式,特别是在社交网络如QQ空间这样的平台上。QQ相册点击图片放大效果是一种常见的交互设计,让用户能够更清晰地查看照片的细节。这种效果通常由CSS3、HTML5...

    懒加载案例lazyload

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

    loading(各种AJAX加载图片)

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

    GridView加载大量图片卡的问题

    在Android开发中,GridView是一种常见...综上所述,解决GridView加载大量图片卡顿的问题需要结合异步加载技术、高效的缓存策略以及合理的图片处理,通过这些方法,我们能够显著提升用户体验,打造流畅的图片加载效果。

Global site tag (gtag.js) - Google Analytics