我有一个图像闪烁与大图像的问题.
在我的身体里我有5张图片：
在我的身体里我有5张图片：
<img id="img1" src="img1.png" width="250"> <img id="img2" src="img2.png" width="250"> <img id="img3" src="img3.png" width="250"> <img id="img4" src="img4.png" width="250"> <img id="img5" src="img5.png" width="250">
一个我用jQuery UI拖动其中一个,所有都在改变他们的src和dragend：
function dragStart() {
$('#img2').attr('src','newimg2.png');
$('#img3').attr('src','newimg3.png');
$('#img4').attr('src','newimg4.png');
$('#img5').attr('src','newimg5.png'); }
太好了.但是我需要使用大图像(2000 x 2000px),因为所有图像都可以被点击,然后它们将动画到视口的全尺寸,它们不会像素化.
$this.animate(
{ width: 1800,top: -650,left: -250 },{
duration: 4000,easing: 'eaSEOutElastic'
})
我认为,由于每张图像的大小,它们都在闪烁.如果所有src同时发生变化,你们是否有人知道如何防止这种图像闪烁？
谢谢你的努力
解决方法
您描述的问题对我来说听起来不像预加载问题.
对于预加载会发生,当您开始移动它时从服务器加载另一个图像.但就像我读过你的问题一样,你正在移动包含SRC周围图像的DOM对象.
这很可能是一个浏览器问题,因为他必须将你的图像从2k x 2k缩小到100 x 100.这是一些昂贵的插值东西.
所以你的主要问题可能就像你提到的那样,是图像的大小.
即使预加载也没有用,因为你会遇到同样的问题.
在我看来,你应该有两个版本的图像：一个小版本(你想要拖动的大小)和一个大版本,你想要显示的版本.
当用户点击图像时,可以在后台或按需自动加载大图片.
在网络中,很常见的是,通过平滑的动画将小图像缩放到屏幕尺寸并开始在背景中预加载,当预加载完成时,替换全屏图像以移除像素效果.
我希望我清楚自己.
