如何在页面加载时显示图像而不是 jQuery 单击功能？

问题描述 投票：0回答：1

我使用 Sportlink javascript 库，我试图在页面上显示足球俱乐部的标志。该库仅打印链接，例如：

https://binaries.sportlink.com/KNVB-生产-DOCUMENT/95B8AF6A49636098D3F0709CB8D39A8C?expires=1725642258&sig=e915f414c03e1769fa25587ce6cd65b6ab99f048

所以我尝试将此字符串移动到 img 标签，并且在没有任何 javascript 或 jquery 知识的情况下几乎成功了。

当我单击按钮时，我会得到一个我想要的徽标图像。但我想在页面加载时显示徽标而不单击任何内容。

示例页面：https://alcides.ineeditweb.nl/teams/test-team/

// Javascript library (embedded) code
   <div  
    data-article="programma"
    data-param-gebruiklokaleteamgegevens="NEE"
    data-param-eigenwedstrijden="JA"
    data-param-aantalregels="1"
    data-param-thuis="JA"
    data-param-uit="JA"
    data-label-thuisteamlogo="thuislogo"
    data-fields="thuisteamlogo" 
    ></div> 

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

    <script>
    $(document).ready(function(){
    $("button").on( "click", function(){
    var a = $("div[data-label-thuisteamlogo='thuislogo']").text().replace("thuislogo", "");
    
    let img = document.createElement("img");
    img.src = a;
    document.getElementById("test").appendChild(img);
     });
     });
     </script>

     <button>Return value</button>

      <label id="test" style="width:60px" height="60px"></label>
javascript jquery string image
1个回答
0
投票

要执行您需要的操作，您只需从 

click
处理程序中删除逻辑并将其直接放置在 
ready
处理程序中，以便在 DOM 准备好后立即运行。以下是如何执行此操作的工作示例。

另请注意，由于您已经在使用 jQuery，因此您也可以使用它来简化创建新 

img
元素的逻辑。此外，
<script>
标签不应放置在 HTML 的中间。将它们放在 
<head>
或 
</body>

之前 

<!-- in the <head> of your page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var imgUrl = $("div[data-label-thuisteamlogo='thuislogo']").text().replace("thuislogo", "");
    $('<img />').prop('src', imgUrl).appendTo('#test');
  });
</script>

<!-- in the <body> of your page -->
<div data-article="programma" data-param-gebruiklokaleteamgegevens="NEE" data-param-eigenwedstrijden="JA" data-param-aantalregels="1" data-param-thuis="JA" data-param-uit="JA" data-label-thuisteamlogo="thuislogo" data-fields="thuisteamlogo">https://binaries.sportlink.com/KNVB-production-DOCUMENT/95B8AF6A49636098D3F0709CB8D39A8C?expires=1725642258&sig=e915f414c03e1769fa25587ce6cd65b6ab99f048</div>

<button>Return value</button>

<label id="test" style="width:60px" height="60px"></label>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.