1. 首頁
  2. 問答
  3. Javascript to image fallback

Javascript to image fallback

2014-09-20 123 views
0

我正在研究一個可以嵌入到第三方網站的Web小部件。Javascript to image fallback

由於很多內容管理系統不允許用戶發佈/執行腳本，因此如果發生這種情況，我希望我的小部件顯示圖像而不是JS生成的內容。

<script type="text/javascript"> 
    (function(){var s = document.createElement('script');s.src = '//example.com/file.js';s.async = "async";document.body.appendChild(s);}()); 
</script> 
<img src="//example.com/image.svg?param1=value1" src="" id="my_fallback">

現在我正在使用上面的代碼。只有腳本沒有加載時，是否有任何方法可以顯示圖像？目標是減少傳輸使用並提供更好的用戶體驗。

我的小部件腳本的第一行是刪除#my_fallback，但速度不夠快 - 有時我可以在實際小部件內容替換它之前看到圖像一秒。

我想出的唯一辦法是通過在圖像生成器的開頭添加諸如sleep（）之類的東西來延遲創建圖像。

編輯

不，<noscript>不會在這裏工作。如果用戶禁用了JavaScript，我不想回退。當腳本尚未加載時，我想回退 - 出於任何原因，特別是如果某些安全機制切斷了<script>部分。

來源

2014-09-20 dev9

回答

4

使用html標籤的NoScript

<noscript>Your browser does not support JavaScript! or a image here</noscript>

記住

在HTML 4.01，標籤只能在元素中使用。

在HTML5中，標籤既可以在內部也可以在內部使用。

編輯： - 添加一個HTML標籤

<span class="noscript">script is loading.....or put image</span>

腳本標籤

現在

在您的腳本，必須是內部負載添加一個類似的代碼 末

加入這行 
$('.noscript').hide();

這是您可以處理相同的另一種方式！

來源

2014-09-20 09:51:10

+0

請仔細閱讀我的問題。如果用戶禁用了JavaScript，我不想回退。我想在沒有加載腳本的情況下回退 - 出於任何原因，特別是如果某種安全機制切斷了「

0

一個快速解決方案是從該腳本創建一個全局變量，對窗口對象可見。也必須隱藏圖像。然後，在main.js腳本上檢查該變量。如果它存在，那麼從那裏運行你的Widget代碼。如果它不存在，則在後備圖像中淡入淡出。

下面有一個demo

默認IMG是圖像272x178大小和窗口小部件圖像是300x400大小。

要模擬腳本不可用時的操作，只需使用不同名稱命名變量myWidgetIsEnabled，以便條件失敗。 這裏是一些代碼：

// Code goes here 
var widget = (function(){ 
window.myWidgetIsEnabled = true; 
    return { 
    init: function(){ 
    var s = document.createElement('script');s.src = 'file.js';s.async = "async"; 
    document.body.appendChild(s);} 
} 
}()); 

$(document).ready(function(){ 
if(window.myWidgetIsEnabled){ 
    widget.init(); 
    }else{ 
    console.log('not enabled, the default behavior'); 
    $('.fallback').fadeIn(); 
} 
})

來源

2014-09-20 11:36:17 gdyrrahitis

+0

問題是我不知道我的任何JS代碼是否會被執行。 – dev9 2014-09-21 10:53:00

相關問題

 相關問題