如何在javascript中將img src屬性更改爲data-src？

Question

我使用此代碼來改變形象src屬性數據src屬性，但它不工作，我不知道我做錯了任何幫助將是appreciated.Thanks

<script> 

    $("img").each(function() { 
    $(this).attr("data-src",$(this).attr("src")); 
    $(this).removeAttr("src"); 
}); 

</script> 
    <img src="test.jpg" width="300" height="200"> 

我想這個輸出

<img data-src="test.jpg" width="300" height="200"> 

Answer 1

試試下面的代碼：

$("img").each(function() { 
 
    
 
     $(this).attr("data-src",$(this).attr("src")); 
 
     $(this).removeAttr("src"); 
 
     console.log($(this)[0].outerHTML); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 

 
    
 
    </script> 
 
     <img src="test.jpg" width="300" height="200">

Answer 2

您需要在HTML中添加圖像後，像這樣來執行你的JS代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="test.jpg" width="300" height="200"> 
 
<script> 
 

 
$("img").each(function() { 
 
    var $this = $(this); 
 
    var src = $this.attr("src"); 
 
    $this.attr("data-src", src); 
 
    $this.removeAttr("src"); 
 
}); 
 

 
</script>