Question

我有一个模糊效果发生在图像上，目前模糊动画在加载DOM时开始。

唯一的问题是我从外部资源加载了一些脚本，google api等。有时这些脚本需要很长时间才能加载，因此jquery文档就绪功能需要很长时间才能启动。由于我的模糊动画等待DOM准备就绪，因此图像在屏幕上模糊的时间比我想要的要长得多。

我认为不是等待DOm加载，也许我可以等到页脚呈现并使用加载事件来触发模糊效果。

这是模糊的svg：

<svg width="0px" height="0px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="better-blurBrand-@counter" x="0" y="0" width="1" height="1">
   <feGaussianBlur stdDeviation="25" result="blurred">
      <animate id="animBrand-@counter" attributeType="XML" attributeName="stdDeviation" from="25" to="0" begin="indefinite" fill="freeze" dur="0.35s"></animate>
   </feGaussianBlur>
   <feMorphology in="blurred" operator="dilate" radius="25" result="expanded"></feMorphology>
   <feMerge>
      <feMergeNode in="expanded"></feMergeNode>
      <feMergeNode in="blurred"></feMergeNode>
   </feMerge>
  </filter>
</svg>

这是HTML：

<div class="image-wrapper clone" style="background-image: url('data:image/jpeg;base64,@brand.PictureModel.base64Img'); background-size: cover; background-position: bottom; filter: url(#better-blurBrand-@counter);"></div>
<div class="image-wrapper orig" style="background-image: url('@brand.PictureModel.ImageUrl'); background-size: cover; background-position: bottom; filter: url(#better-blurBrand-@counter);"></div>

这是JS：

@{ 
   string animBrand = string.Format("#animBrand-{0}", counter);// This is used to blur up each image and is C#
 }
<script type="text/javascript">
    jQuery("#responsive-footer").load(function () {
        if (jQuery('@animBrand')[0].beginElement) {
            jQuery('@animBrand')[0].beginElement();
        }
    });
</script>

如果我使用

jQuery(document).ready(function () {
     //animate code
}); it works fine

以下是我想要发生的a fiddle。

任何人都知道为什么我的加载事件没有触发。从我在jquery api网站上阅读的内容可以看出来。

更新：我刚刚意识到<div id="responsive-footer">元素是由javascript隐藏，所以它不在DOM中。我想这个可能是为什么但是当我将其更改为实际的页脚元素<div class="footer">时，它仍然不起作用。

干杯

JS不确定为什么我的加载事件不会被解雇

0 个答案: