javascript图片先模糊后清楚_前端模糊切换图片资源-CSDN文库

共3个文件

js：1个

jpg：1个

html：1个

5星 · 超过95%的资源需积分: 10 97 浏览量 2009-10-27 16:10:19 上传评论收藏 157KB RAR 举报

在网页开发中，为了优化用户体验，我们经常遇到一种情况，即在图片加载过程中先展示一个模糊的图片，待大图片完全加载后再替换为清晰的图片。这种技术被称为“图片先模糊后清楚”的加载策略，主要应用于高分辨率或者大尺寸图片的预加载。本文将详细解释这一技术，并给出实现方法。我们要理解为何需要这样做。在现代网页设计中，高质量的图片是提升用户体验的重要元素，但同时也会增加页面加载时间。如果用户在等待大图片加载的过程中看到一片空白，可能会感到不悦。因此，通过展示一个小尺寸、低质量（例如经过模糊处理）的图片，可以让用户感知到内容正在加载，而不会感到空洞或等待的焦虑。实现“图片先模糊后清楚”通常有两种主要方法：CSS渐进增强和JavaScript动态替换。 1. CSS渐进增强：这种方法利用CSS的`filter`属性来模糊图片，配合CSS的`background-size`属性控制图片的显示大小。初始时，我们将背景图片的大小设置为较小的尺寸，同时应用模糊滤镜。当大图片加载完成后，我们改变`background-size`为实际尺寸，移除模糊滤镜，达到从模糊到清晰的效果。 2. JavaScript动态替换：这种方法通常分为两个步骤：第一步，加载小尺寸模糊图片；第二步，当大图片加载完成时，用JavaScript替换掉模糊图片。在JavaScript中，我们可以监听`onload`事件来判断大图片是否已经加载完毕。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图片先模糊后清楚</title> <style> .blur-image { width: 200px; /* 设置小图片尺寸 */ height: auto; filter: blur(5px); /* 应用模糊效果 */ } </style> </head> <body> <img id="image" src="loadimages_files/small-blur.jpg" class="blur-image" data-src="loadimages_files/large-clear.jpg"> <script> var img = document.getElementById('image'); img.onload = function() { img.classList.remove('blur-image'); /* 移除模糊效果类 */ img.style.filter = 'none'; /* 移除CSS滤镜 */ img.src = img.dataset.src; /* 替换为大图片源 */ }; </script> </body> </html> ``` 在这个示例中，`loadimages.html`文件引用了`loadimages_files`目录下的`small-blur.jpg`（模糊的小图片）和`large-clear.jpg`（清晰的大图片）。`<img>`标签的`data-src`属性存储了大图片的URL，初始时显示模糊的小图片。当大图片加载完成（`onload`事件触发），JavaScript会移除模糊效果，替换图片源并显示清晰的大图片。总结来说，“图片先模糊后清楚”的加载策略通过结合CSS和JavaScript，提供了一种优化用户体验的方式。它不仅能让用户感受到图片的加载进度，还可以减少页面加载时间，尤其在移动设备上，网络条件可能较差的情况下，这种技术显得尤为重要。通过灵活运用，开发者可以创造出更流畅、更友好的网页体验。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （3个子文件）

loadimages.html 3KB

loadimages_files

jquery-1.js 56KB

71ljch.jpg 137KB

<!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=UTF-8"> <title>Demo : Dev By CssRain.cn</title> <style> *{margin:0;padding:0;} img{border:0;} .wrap{position:relative;width:750px;height:550px;border:1px solid #bbb;} #loading{background:#E5ECF9;opacity:0.5;position:absolute;right:1px;top:1px;vertical-align:top;z-index:1;display:none;font-size:12px;} </style> <script src="loadimages_files/jquery-1.js" type="text/javascript"></script> <script type="text/javascript"> /* 图片由模糊变为清楚 Dev By CssRain.cn */ jQuery.fn.loadthumb = function(options) { options = $.extend({ smallsrc:"", src : "", width:0, height:0 },options); var _self = this; _self.attr({"src":options.smallsrc , width: options.width, height: options.height}); _self.parent().css({width: options.width+"px", height: options.height+"px"}); $("#loading").css("opacity",0.5).show(); var img = new Image(); $(img).load(function(){ _self.attr("src", options.src); //把这句注释查看模糊效果 $("#loading").hide(); }).attr("src", options.src); return _self; } $(document).ready(function(){ $("button:eq(0)").click(function(){ $("#myImage").loadthumb({ smallsrc: "http://tbn1.google.cn/images?q=tbn:ei0ZAWlixQLOTM:", //小图 src :"http://tinypic.com/71ljch.jpg",//大图 width: 637, height: 480 }); $("button:eq(1)").show(); }); $("button:eq(1)").click(function(){ $("#myImage").loadthumb({ smallsrc: "http://tbn2.google.cn/images?q=tbn:WceuibIiitXOuM:", //小图 src :"http://www.tclking.com/pic/M711.jpg",//大图 width: 600, height: 480 }); $("button:eq(2)").show(); }); $("button:eq(2)").click(function(){ $("#myImage").loadthumb({ smallsrc: "http://tbn3.google.cn/images?q=tbn:iq1DIiImNNzedM:", //小图 src :"http://www.sinaimg.cn/IT/digi/2007-08-23/21a6c9bdcf6ba620942be1d22040fffa.JPG",//大图 width: 615, height: 480 }); }); }); </script> </head><body> <h1>使用jQuery实现图片由模糊变为清楚。</h1> <button>查看第1张</button><button style="">查看第2张</button><button style="display: none;">查看第3张</button> <div style="width: 637px; height: 480px;" class="wrap"> <div style="opacity: 0.5; display: none;" id="loading">正在载入...</div> <img id="myImage" src="loadimages_files/71ljch.jpg" width="637" height="480"> </div> <p>Dev By <a href="http://www.cssrain.cn/">CssRain.cn</a></p> </body></html>

评论收藏

内容反馈