JavaScript是一門(mén)廣泛應(yīng)用于web開(kāi)發(fā)中，具有強(qiáng)大功能的腳本語(yǔ)言，在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常會(huì)使用JS來(lái)呈現(xiàn)豐富的交互效果，其中圖片呈現(xiàn)是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一個(gè)部分。但是有時(shí)，我們?cè)陧?yè)面中插入的圖片會(huì)出現(xiàn)閃爍的情況，這不僅影響到用戶(hù)的視覺(jué)體驗(yàn)，也會(huì)對(duì)網(wǎng)頁(yè)的整體質(zhì)量產(chǎn)生負(fù)面影響。因此，如果你也曾遇到過(guò)類(lèi)似的問(wèn)題，不妨跟我一起來(lái)探討一下圖片閃爍的原因以及解決方法。 當(dāng)我們插入的圖片出現(xiàn)閃爍現(xiàn)象時(shí)，這通常的原因是網(wǎng)頁(yè)正在加載時(shí)，圖片或圖片容器的寬高、背景色等屬性發(fā)生了變化。如果頻繁的改變了img標(biāo)簽的src或容器的寬高等屬性，則會(huì)導(dǎo)致瀏覽器重復(fù)渲染頁(yè)面，從而導(dǎo)致圖片閃爍。例如，我們常用的圖片輪播器（包括幻燈片）正是通過(guò)不斷改變圖片src來(lái)實(shí)現(xiàn)輪播效果，而這種方式往往會(huì)導(dǎo)致圖片閃爍。以下是一個(gè)簡(jiǎn)單的例子：

//html代碼
//JS代碼
var imgIndex = 0;
var len = document.getElementsByClassName('img-container')[0].getElementsByTagName('img').length;
setInterval(function(){
document.getElementsByClassName('img-container')[0].getElementsByTagName('img')[imgIndex].style.display = 'none';
imgIndex = (++imgIndex) % len;
document.getElementsByClassName('img-container')[0].getElementsByTagName('img')[imgIndex].style.display = 'block';
}, 2000);

在這個(gè)例子中，圖片輪播器每2000毫秒切換一張圖片，循環(huán)播放。但是，在不同圖片之間切換的過(guò)程中，圖片會(huì)出現(xiàn)閃爍（黑屏）的情況，這就是因?yàn)镴S在不停的改變圖片的src屬性值，導(dǎo)致瀏覽器不斷重繪頁(yè)面所致。那么，有什么辦法可以解決這個(gè)問(wèn)題嗎？ 方法一 ： 使用preload預(yù)加載圖片 預(yù)加載可以減少圖片在應(yīng)用過(guò)程中的閃爍，而預(yù)加載的方法就是在現(xiàn)有代碼中提前加載未使用的圖片，在需要時(shí)直接使用即可。以下是一個(gè)簡(jiǎn)單的預(yù)加載例子：

function preloadImage(path) {
 var imgObj = new Image();
 imgObj.src = path;
}
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
images.forEach(function(image) {
preloadImage(image);
});

方法二：使用CSS樣式控制 在常見(jiàn)的圖片閃爍現(xiàn)象中，有很多的原因都是因?yàn)楦淖兞藞D片容器的寬高、背景色等屬性所導(dǎo)致的。那么我們可以使用CSS樣式來(lái)控制，使其在頁(yè)面加載時(shí)就完成。例如：

.img-container img {
width: 100%;
height: auto;
}
.icon {
background-image: url(icon.png);
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
width: 24px;
height: 24px;
}

通過(guò)上述操作我們可以消除圖片的閃爍現(xiàn)象。同時(shí)，我們也可以通過(guò)其他方法來(lái)消除圖片閃爍，比如說(shuō)減少頁(yè)面元素的數(shù)量，縮小圖片文件的大小等等。只要我們注意到其閃爍的原因，并盡可能的減少其出現(xiàn)的可能性，我們就可以保證用戶(hù)的視覺(jué)體驗(yàn)。