javascript - Change data-src to src via jquery - Stack Overflow

admin管理员组

文章数量:1356259

Im using a flexslider that has audio files for each slide, but I don't want to load countless audio files right away on the page. So im trying to get the data-src to bee the src after each slide

the slides are currently as follows:

<div class="flexslider carousel">
<ul class="slides">
<li> 
<img src=".jpg"  /> 
<audio id="demo" controls>
   <source src="/skin/frontend/gigasavvy/quinn/audio/Slide1.mp3" type="audio/mpeg" />
</audio>
</li>
<li> 
<img src=".jpg"  /> 
<audio id="demo" controls>
   <source data-src="/skin/frontend/gigasavvy/quinn/audio/Slide3.mp3" src="" type="audio/mpeg" />
</audio>
</li>
</ul>
</div>

In the after function i want to change data-src to src. Any help would be greatly appreciated as how to go from data-src to src

Im using a flexslider that has audio files for each slide, but I don't want to load countless audio files right away on the page. So im trying to get the data-src to bee the src after each slide

the slides are currently as follows:

<div class="flexslider carousel">
<ul class="slides">
<li> 
<img src="http://www.quinnmedical./skin/frontend/gigasavvy/quinn/ppt/Slide01.jpg"  /> 
<audio id="demo" controls>
   <source src="/skin/frontend/gigasavvy/quinn/audio/Slide1.mp3" type="audio/mpeg" />
</audio>
</li>
<li> 
<img src="http://www.quinnmedical./skin/frontend/gigasavvy/quinn/ppt/Slide03.jpg"  /> 
<audio id="demo" controls>
   <source data-src="/skin/frontend/gigasavvy/quinn/audio/Slide3.mp3" src="" type="audio/mpeg" />
</audio>
</li>
</ul>
</div>

In the after function i want to change data-src to src. Any help would be greatly appreciated as how to go from data-src to src

• javascript
• jquery
• html
• flexslider
• custom-data-attribute

Share Improve this question Follow asked Jun 25, 2014 at 16:54 RMHRMH 83122 gold badges1515 silver badges3939 bronze badges 2

• You can't change it. All you can do is add a new attribute and remove a previous one. – Kevin B Commented Jun 25, 2014 at 17:08
• I think a better solution would be to set < audio preload="none">, which will just turn off all preloading of files. Or if you really want preload of the current slide, change the preload property to "auto" when the slide is visible. – Ringo Commented Dec 8, 2016 at 19:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Renaming an attribute is not be possible. You can add new attribute and remove the old one.

Suppose there is a click event as in the following example:

$('#demo').on("click", "img", function () {
   var t = this;
   var source = $(t).children("source");        
   $source.attr({
       src: $t.attr('data-src')
   }).removeAttr('data-src');
}

Please modify the event according to your requirements.

Try this:

$('source').attr("src", $(this).data('src'));
$('source').removeAttr('data-src');

This should move the url from data-src to src, and then remove the data-src attribute.

Inside the after function get the currently visible slide and then get the auto on it and it's source. Next check to see if it already has a src attribute. If not then set it to it's own .data('src'). Add this into the flexslider object.

after: function(){
    var $currentAudio = $('.flex-active-slide audio source');
    if(!$currentAudio.attr('src')){
        $currentAudio.attr('src', $currentAudio.data('src'));
    }
}

本文标签： javascriptChange datasrc to src via jqueryStack Overflow