頁面加載時不透明，但使用漸進增強方法？

我想在頁面加載時在網頁上淡入一些圖像，所以從不透明度開始：0然後使用圖像加載腳本淡入不透明度：1。頁面加載時不透明，但使用漸進增強方法？

但是，爲了使腳本起作用，圖像必須最初是不可見的。所以如果我使用CSS將不透明度設置爲零，如果用戶沒有使用javaScript，他們將不會看到任何圖像。

爲了解決這個問題，我試圖通過jQuery這樣的應用零透明度...

$(".images").css('opacity', 0);

...但我仍然在100％不透明度得到了圖像的閃爍，然後jQuery的踢，掩藏他們，只爲他們再次與圖像加載腳本淡入。

那麼在加載之前最初隱藏圖像的最安全方法是什麼，即使用戶禁用了javaScript，他們仍然能夠看到圖像，它們只是不會獲得幻想圖像加載效果？

在此先感謝

來源

2013-10-12 Adam

可以隱藏在加載圖像然後讓jQuery的做之前使之可見淡入淡出？ – dbarnes

大部分觀衆是否禁用JavaScript？我相信這是相當罕見的。 – Rich

我同意Rich但是我希望展示的部分是相當重要的部分，我花了很多時間讓網站儘可能讓所有人都能訪問，所以會遺憾的是，對於這個小問題 – Adam

這裏，這是我最後一次嘗試，因爲你所有的地方：

.images { 
opacity: 0; 
}

jQuery中

：

<noscript> 
<style type="text/css"> 
.images { 
opacity:1; 
} 
</style> 
</noscript>

在樣式表

$('.images').fadeIn();

如果有人沒有JavaScript，那麼它會打到noscript標籤並將圖像的不透明度改回1.儘管最近誰沒有javascript？

來源

2013-10-12 22:50:14 btm1

你完全誤解了這個問題。我試圖找到一個最安全的隱藏圖像的方式，理想情況下使用javascript – Adam

看到調整答案 – btm1

這更糟！所以如果用戶沒有使用javaScript，整個頁面將會變成空白的？我正在尋找一個後備，如果用戶沒有javaScript，那麼至少該頁面和圖像仍然可見，他們只是不會得到很酷的圖像加載效果 – Adam

，如果您使用的是「圖像加載腳本」通過JS又名加載它，你可以做這樣的事情：

var img = $(document.createElement('img')); 
img.on('load.fade-image', function() { 
    // Note: set opacity of the image before adding it to the DOM, this way it will be rendered with 0 opecity 
    img.css('opacity', 0); 
    img.appendTo('body'); 
}); 
img.attr('src', 'http://some-url');

來源

2013-10-12 23:39:28 Stefan

頁面加載時不透明，但使用漸進增強方法？

回答

相關問題