Question

我想在scrollTop到达特定位置时重新加载svg文件。 Svg使用object标记添加到html页面。

html代码

<section class="section" id="svg-scroll">
.....
<object type="image/svg+xml" data="http://reussis.com/demo/vardan/svg/icons_-04.svg"></object>
....
<object type="image/svg+xml" data="http://reussis.com/demo/vardan/svg/icons_-03.svg"></object>
.....</section>

脚本

$(document).ready(function(){
    svg_scroll_function();
    $(window).scroll(function() {    
            svg_scroll_function();
    }); 
})
function svg_scroll_function() {
     var scroll = $(window).scrollTop();

    if (scroll >= ($('#svg-scroll').offset().top -80)) {

        $('object').reload();// Here i want to reload something
    }
}

Answer 1

仅限一次，将root中的first_time var设置为true;

var first_time = true; //this should be outside of scroll function
...
if(first_time){
  $('object').each(function(index,el){
    $(el).attr('data', $(el).attr('data'));
  });
  first_time = false;
}

Answer 2

要重新加载objects中的文件，您必须获取对这些元素的引用，然后更新其data属性。

在下面的示例中，我们抓取DOM中的每个object并通过将其data属性重置为已有的值来重新加载它们：

var objects = document.getElementsByTagName("object");

for(var i = 0; i < objects.length; i++) {

    var obj = objects[i];

    obj.data = obj.data // will trigger update
}

如果不是更新DOM中的每个object，而是希望只更新一个，那么为该对象提供id属性（即swf-obj）并设置其{{1 }}属性为其当前值：

data

如何重新加载html标签对象数据？

2 个答案: