图片加载完毕再淡入

最新推荐文章于 2021-05-31 19:56:40 发布
最新推荐文章于 2021-05-31 19:56:40 发布
阅读量353 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31029729/article/details/51996420
本文介绍了一种利用HTML和CSS实现图片加载时透明度渐显的效果。通过设置初始透明度为0并在图片加载完成后调整透明度到1的方式，实现了平滑过渡。此方法适用于网页中需要优雅展示图片的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



html

<a href="#" class="box">
	<img class="img" src="loadimg.jpg" onload="this.style.opacity=1;" style="opacity: 1;">			
</a>

css 

.box{
    position: relative;
    width: 126px;
    height: 82px;
    background: #e8e8e8;
}
.img{
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}


































                

        

    

    
  



    



                



	

		

			

				
					
Vue - 图像加载时渐隐淡入效果（img）

				
			

			

				

					🏆 前端领域优质创作者
				

				

					05-07
					
					2070
					
				

			

		

		

			
				
前言

由于原生<img>图片加载成功后，会突然显示出来比较生硬，所以需要对其进行动画修饰。

我们可以利用简单的动画对其进行修饰，当图片加载完毕后应用
您可以自己设置一个渐隐的过渡效果时间，如下图所示：

解决方案

有两种方案，第一种即利用纯CSS动画进行，第二种则利用图片onload事件进行监听加载，随即调用函数绑定动画，两种方式均有利弊。

<img
src="https://img.yzcdn.cn/vant/cat.jpeg"
class="load-fade"
/

			
		

	



                

            
              



	

		

			

				
					
如何让一副图片在页面加载完成时候出现移动翻转和淡入的效果？

				
			

			

				

					xiaoxin888888的专栏
				

				

					03-10
					
					1332
					
				

			

		

		

			
				
很高兴和大家见面了，这次主题如题所示。flex加载图片有几种形式，一般有代码式和声明式的。声明式的比较简单点，我们先看看应该怎么写.编程式的比较麻烦的[Bindable][Embed(source=assets/close.png)]public var pic:Class;接下来我们简单编写一些效果代码    它们分别实现了淡入，移动和翻转的效果。将效果应用于

			
		

	



              


  
              

                


	

		

			

				
					
html图片载入画面时淡入,简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果...

				
			

			

				

					weixin_42515409的博客
				

				

					05-31
					
					378
					
				

			

		

		

			
				
对于一个网站，最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，有时是必须的，作为一个站长，我们是千方百计的使用各种技巧来优化图片，我们可以使用 ImageOptim 或 TinyPNG 来消减图片体积，或用 data URIs 和小图片来提升图片加载速度。如果一个页面上图片太大，或图片太多，无法消减，我们有另外一个方法来提升用户的页面显示体验，那就是延迟加载(lazy load)。之...

			
		

	





	

		

			

				
					
css3加载图片淡入效果

				
			

			

				

					微电子学与固体电子学-俞驰
				

				

					02-06
					
					472
					
				

			

		

		

			
				
代码如下:



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<style type="text/css">
    .div {
        position: relat...

			
		

	



		

			
		



	

		

			

				
					
图片加载淡入淡出效果

				
			

			

				

					weixin_34219944的博客
				

				

					04-07
					
					259
					
				

			

		

		

			
				
HTML代码
首先是图片标记的写法：
<img data-src="/path/to/image.jpg" alt="">
需要将图片的地址放到 data-src 属性里，而src值填写默认的一张图片。
CSS代码
所有具有data-src属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：
img {
    opacity: 1;
    transition: opaci...

			
		

	





	

		

			

				
					
JavaScript代码实现图片延迟加载并淡入淡出显示效果

				
			

			

				

					键盘上的青春的博客
				

				

					08-05
					
					2818
					
				

			

		

		

			
				
H对于一个网站，最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，有时是必须的，作为一个站长，我们是千方百计的使用各种技巧来优化图片，我们可以使用
 ImageOptim 或 TinyPNG 来消减图片体积，或用 data
 URIs 和小图片来提升图片加载速度。如果一个页面上图片太大，或图片太多，无法消减，我们有另外一个方法来提升用户的页面显示体验，那就是延迟加载(lazy

			
		

	





	

		

			

				
					
jQuery-onload让第一次页面加载时图片是淡入方式显示

				
			

			

				

					10-28
				

			

		

		

			
				
这允许开发者执行依赖于图片加载完成的脚本，比如在图片上应用淡入效果。  使用jQuery的`.load()`方法可以绑定事件处理程序到图片加载事件上。在事件处理函数中，我们可以设置图片初始状态为隐藏（使用`.hide()`方法...

			
		

	





	

		

			

				
					
android端用于异步加载图片，内存缓存等，imageview显示图片时增加淡入淡出动画_动画效果。.zip

				
			

			

				

					09-11
				

			

		

		

			
				
例如，当新图片加载完毕时，可以逐渐增加其透明度，从完全透明渐变到完全不透明，从而实现平滑过渡。  5. **图片处理**：  在加载图片前，可能需要进行一些处理，如调整图片大小、裁剪、圆角化等，以适应不同的屏幕...

			
		

	





	

		

			

				
					
CSS 图片加载完成再淡入显示

				
			

			

				

					weixin_33753003的博客
				

				

					01-08
					
					946
					
				

			

		

		

			
				
一、方法
加载完成再显示：借助Image对象的onload事件，加载完时再把src赋给img标签的src；
淡人显示：起始opacity为0，利用transform过度到1
二、代码


 1 &lt;!DOCTYPE html&gt;
 2 &lt;html lang="en"&gt;
 3 &lt;head&gt;
 4     &lt;meta charset="UTF-8...

			
		

	





	

		

			

				
					
ios通过SDWebImage实现图片加载时的渐变效果

				
			

			

				

					08-30
				

			

		

		

			
				
在iOS应用开发中，图片加载是常见的操作，特别是在用户界面设计中，图片的展示质量直接影响用户体验。SDWebImage是一个流行的第三方库，用于在iOS中高效地下载和缓存网络图片。它提供了许多功能，包括异步加载、内存...

			
		

	





	

		

			

				
					
花瓣网图片淡入淡出轮播图

				
			

			

				

					11-16
				

			

		

		

			
				
设置适当的缓冲时间，让图片加载完毕后再开始淡入；以及添加指示器，让用户知道当前是哪张图片。  6. **响应式设计**：考虑到不同设备的屏幕尺寸，轮播图应该具有响应式设计，适应手机、平板和桌面电脑等各种屏幕。...

			
		

	





	

		

			

				
					
页面第一次加载实现图片淡入方式加载

				
			

			

				

					weixin_34082177的博客
				

				

					12-31
					
					337
					
				

			

		

		

			
				
页面第一次加载实现图片淡入方式加载:图片以淡入方式加载总是让人感觉有一种动态的感觉，可以让用户体验更好，下面就简单介绍一下如何实现此效果。当页面加载的时候，让加载好的图片先隐藏，然后再使用fadeIn()函数实现图片的淡入效果，参考代码如下:<script type="text/javascript">$("#load img").load(function() {  $(this...

			
		

	





	

		

			

				
					
（简单实现）JS CSS实现图片加载后慢慢淡出 有具体代码

				
			

			

				

					weixin_43134135的博客
				

				

					12-29
					
					2547
					
				

			

		

		

			
				
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;
&amp;amp;lt;html&amp;amp;gt;
&amp;amp;lt;head&amp;amp;gt;
    &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt;
    &amp;amp;lt;title&amp;amp;gt;这个标题会变&a

			
		

	





	

		

			

				
					
SDWebImage加载图片添加淡入淡出动画

				
			

			

				

					旸君颜的博客
				

				

					09-29
					
					2236
					
				

			

		

		

			
				
话不多说，直接改UIImageView+WebCache.m 的这个方法

- (void)sd_setImageWithURL:(nullable
NSURL *)url
          placeholderImage:(nullable
UIImage *)placeholder
                   options:(SDWebImageOptions)op

			
		

	





	

		

			

				
					
CSS图片淡入淡出效果

				
			

			

				

					y670340559的博客
				

				

					10-31
					
					1万+
					
				

			

		

		

			
				
@-webkit-keyframes fadeInOut {
   0% {
       opacity:1;
    }
   25% {
       opacity:0;
   }
   50% {
       opacity: 0;    
   }
   75% {
       opacity:1;
   }
}
.anim_fade_image {


			
		

	





	

		

			

				
					
图片预加载完成再执行动画，解决动画执行时图片还未加载完成的问题

				
			

			

				

					web_xyk的专栏
				

				

					08-07
					
					3196
					
				

			

		

		

			
				

一、场景


1.多图片衔接动画

2.鼠标指向图片时，图片翻转显示另一张图

等等

 


二、实现方式


利用 Image()构造函数创建一个屏幕外图片对象，之后将该对象的src属性设置成期望的URL，由于图片元素并没有加载到文档中，因此，它是不可见的，但是浏览器还是会加载图片并将其缓存起来。这样以来，当页面中再有用到该图片的时候就能很快从缓存中加载。就不会出现加载慢导致的图片显示不出来...

			
		

	





	

		

			

				
					
Glide入门教程——4. 占位图& 淡入淡出动画

				
			

			

				

					苏白的专栏
				

				

					09-13
					
					6622
					
				

			

		

		

			
				
Glide — 占位图 & 渐变动画

原文：Placeholders & Fade Animations
作者：Norman Peitek
翻译：Dexter0218

在学习了如何从各种图片源中加载图片后，这节将要学习占位图——在实际图片加载完成前预加载的图片。


文／签到钱就到（简书作者）
原文链接：http://www.jianshu.com/p/15eaca9cb9

			
		

	





	

		

			

				
					
关于Glide——一个高效的图片加载和缓存类库

				
			

			

				

					shan286的专栏
				

				

					09-28
					
					8725
					
				

			

		

		

			
				
Glide，一个高效的图片加载和缓存类库

			
		

	





	

		

			

				
					
Glide-占位图以及加载动画

					
热门推荐

				
			

			

				

					夏雨
				

				

					02-13
					
					3万+
					
				

			

		

		

			
				
前言:这一节我们将讲到Glide如何使用占位图,错误图,以及使用加载动画Glide 系列目录
Glide入门教程
[Glide-占位图以及加载动画]
1.设置占位图(placeholder)有时候加载的图片过大时,或者网络不好时,我们经常希望控件在加载过程中有一张默认的占位图Glide.with(this).load(url).placeholder(R.mipmap.place).into(iv)

			
		

	





	

		

			

				
					
Dreamweaver实现图片淡入淡出效果

				
			

			

				

					
				

			

		

		

			
				
例如，为了更好的用户体验和性能，图片可能需要进行懒加载处理，即图片不在页面加载时一次性加载完毕，而是根据用户的滚动位置动态加载；同时，考虑到不同用户的屏幕尺寸和分辨率，可能需要设置响应式图片。  综合...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值