2 ttdddfff ttdddfff 于 2017.09.19 09:46 提问

img加载图片资源与显示效果不同?

图片说明

三张不同图片请求资源不相同,有时候会出现展示图片与请求图片不相同?
图片说明
图片说明

6个回答

qq_38200881
qq_38200881   2017.09.19 10:56

这个问题我也有遇到过,是资源刷新的速度跟不上换图片的速度,大概是这样。我自己想的解决办法是,不换图片的src,直接把三张图片都写上去,通过改变图片的透明度来达到更换图片的效果。

ttdddfff
ttdddfff   2017.09.20 09:00

使用jquery的淡入淡出效果吗?试过了还是不行!

qq_38200881
qq_38200881   2017.09.20 09:49

<!DOCTYPE html>




<br> #whole{<br> width: 200px;<br> height: 200px;<br> border: 3px solid black;<br> position: relative;<br> }<br> #whole img{<br> position: absolute;<br> top: 0px;<br> left: 0px;<br> opacity: 0;<br> }<br> #whole img:nth-child(1){<br> opacity: 1;<br> }<br>









<br> var whole = document.getElementById(&quot;whole&quot;);<br> function randomN(min, max){<br> return Math.round(Math.random() * (max - min) + min);<br> }<br> function imgOpacity(){<br> for(var i = 0; i &lt; whole.children.length; i++){<br> whole.children[i].style.opacity = &quot;0&quot;;<br> }<br> }<br> console.log(whole.children);<br> setInterval(function(){<br> imgOpacity();<br> var nu = randomN(0, 3);<br> console.log(nu);<br> whole.children[nu].style.opacity = &quot;1&quot;;<br> }, 1000);<br>

不知道你要的是不是这种效果,这是我刚写的测试的,你试试。
qq_38200881
qq_38200881   2017.09.20 09:51

*图片说明
图片说明

ttdddfff
ttdddfff   2017.09.21 08:53

你可能误解了,我这三张图什么效果都不需要,只是简单的展示出来,你写的这种效果一直在隐藏于显示切换,而且多打开几次页面还是会
出现我说的那种情况。

qq_38200881
qq_38200881 好吧
2 个月之前 回复
ttdddfff
ttdddfff   2017.09.21 15:24

图片说明

有没有大神知道原因,右边三张不同请求资源图片,左边展示处两张一样的图片。服务器端这三张图片完全不相同

Csdn user default icon
上传中...
上传图片
插入图片