Javascript to image fallback

我正在研究一个可以嵌入到第三方网站的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

使用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

请仔细阅读我的问题。如果用户禁用了JavaScript，我不想回退。我想在没有加载脚本的情况下回退 - 出于任何原因，特别是如果某种安全机制切断了“

一个快速解决方案是从该脚本创建一个全局变量，对窗口对象可见。也必须隐藏图像。然后，在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

问题是我不知道我的任何JS代码是否会被执行。 – dev9 2014-09-21 10:53:00

Javascript to image fallback

回答

相关问题