Question

我正在开发一个可以嵌入第三方网站的Web小部件。

由于许多内容管理系统不允许用户发布/执行脚本，我希望我的小部件在出现这种情况时显示图像而不是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>部分。

Answer 1

使用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();

这是你可以处理同样的另一种方式！

Answer 2

一个快速解决方法是从该脚本创建一个全局变量，对窗口对象可见。此外，必须隐藏图像。然后，在main.js脚本上检查该变量。如果存在，则从那里运行您的小部件代码。如果它不存在，则淡入后备图像。

继承人 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();
 }
})

Javascript到图像后备

2 个答案: