javascript - js 改变background-image 图片都会闪一下怎么办。。。
伊谢尔伦
伊谢尔伦 2017-04-11 13:19:21
[JavaScript讨论组]

用js改变backgroundImage属性,在iphone上测试,每次更换图片都会闪一下。

update:
只有iphone会闪,使用了onload也闪,代码如下

  function selection(num0, num1, num2) {
            var img = new Image();
            img.src = urls[num0][1];
            img.onload = function () {
                console.log("complete");
                selections[num0].style.backgroundImage = "url(" + urls[num0][1] + ")";
                list[num0].style.display = "block";
                selections[num1].style.backgroundImage = "url(" + urls[num1][0] + ")";
                list[num1].style.display = "none";
                selections[num2].style.backgroundImage = "url(" + urls[num2][0] + ")";
                list[num2].style.display = "none";
            }
        }
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(5)
PHPz

因为修改了图片后,新修改的图片没有下载过,所以是空白的

你可以把要修改的图片创建img标签隐藏起来,做个预加载

大家讲道理

因为下载图片需要时间,你可以等图片加载完再赋值。

巴扎黑

这个问题我也遇到过,很多说法是说跟图片没有预加载有关,但是我之前确确实实是写了预加载的。即使预加载了了这张图片,但是在你更换图片的时候浏览器也有可能会重新请求这张图片。不太确定楼主的问题是否有这个因素在影响,楼主可以测试下。

天蓬老师

图片多了?不多的话建议将图片拼成雪碧图,按照帧动画方式来切换图片显示
或者你可以把图片实现按顺序堆叠好,按需显示你想要的

<img src="1.jpg" style="display:blcok">
<img src="2.jpg" style="display:hide">
<img src="3.jpg" style="display:hide">
<img src="4.jpg" style="display:hide">
PHP中文网

遇到同样的问题了,请问楼主解决了吗?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号