更改圖片加載後的文本

<span>No images Loaded</span> 
<div id="bar5" class="mosaic-block cover3"> 
    <div class="mosaic-overlay"><img src="images/Seg1.png" /></div> 
    <a href="#" target="_blank" class="mosaic-backdrop"> 
     <div class="details"> 
      <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4> 
      <p>via Desktopped</p> 
     </div> 
    </a> 
</div>

在網站加載此圖片後，我想將文本更改爲其他內容（例如，1加載圖片）。更改圖片加載後的文本

我怎樣才能確定是否已經加載與否，然後更改文本

來源

2014-03-26 Friedpanseller

是在頁面加載得到的圖像加載或更新？ –

由於你原來的問題不包括任何提及的jQuery，這裏是一個簡單的javascript解決方案：

您可以使用onload處理程序圖像：

<span><span id="imagesLoaded">No</span> images Loaded</span> 
<div id="bar5" class="mosaic-block cover3"> 
    <div class="mosaic-overlay"><img onload="imageLoaded()" src="images/Seg1.png" /></div> 
    <a href="#" target="_blank" class="mosaic-backdrop"> 
     <div class="details"> 
      <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4> 
      <p>via Desktopped</p> 
     </div> 
    </a> 
</div>

和JavaScript：

var imageCount = 0; 
function imageLoaded() { 
    ++imageCount; 
    document.getElementById("imagesLoaded").innerHTML = imageCount; 
}

使用jQuery，如果你只是想在頁面中的所有圖像都被通知你可以用這個：

$(window).load(function() { 
    // code here that runs when all images are loaded 
});

如果你不想改變你的HTML包括onload處理程序，並希望每個圖像加載時得到通知，你可以用jQuery做到這一點：

$(document).ready(function() { 
    var imageLoadCount = 0; 

    function updateLoadCount() { 
     $("#imagesLoaded").html(imageLoadCount); 
    } 


    $("img").each(function() { 
     // check if the image is already loaded 
     if (this.complete) { 
      ++imageLoadCount; 
     } else { 
      // image not loaded yet, install an event handler to notify us when it does 
      $(this).load(function() { 
       ++imageLoadCount; 
       updateLoadCount(); 
      }); 
     } 
    }); 
    if (imageLoadCount) { 
     updateLoadCount(); 
    } 
});

來源

2014-03-26 06:38:03 jfriend00

鋸某處不推薦img onload，就像。現在情況如何？ – Friedpanseller

@Friedpanseller - 我不知道有什麼理由不使用onload。一般的建議是將所有的事件處理程序保存在你的javascript中，並通過addEventListener（）（代碼和表示的分離）來安裝它們，除非你不能輕易地使用HTML中的圖像的加載事件來做到這一點，因爲它們可能以及在安裝事件處理程序之前進行加載，如果事件處理程序不在HTML中，則會錯過該事件，如圖所示。所以，爲了最簡單的解決方案，'onload'工作正常。 – jfriend00

我不認爲它正在工作，或者我的瀏覽器/互聯網不工作，或者我做錯了什麼，我試圖在http://sths.friedpanseller.com/ipt/presentation/home使用它。 HTML（第85行，第117行，第25行）直接從0到完成加載網頁沒有變化的數字 – Friedpanseller

，您可以檢查，如： -

$("#myImg").on('load',function() { 
    alert('I loaded!'); 
// Do your change stuff here 
}).attr('src', 'images/Seg1.png');// Assign the Src here :-

這裏是JavaScript方式： -

var img = document.getElementById('yourimg'); 

    var imageSrc = "images/Seg1.png"; 
    img.onload = function() { 
     // Stuff to do after image load 

    }; 
    img.src = imageSrc;

來源

2014-03-26 06:35:58 Pranav

您可能希望指定這需要jQuery，它不是問題的標記。 –

StackOverflow中的常規約定是，如果原始問題中沒有提示jQuery被請求，則不提供jQuery答案。每個人都不使用jQuery，並且StackOverflow希望保留人們提問不是jQuery問題的能力。 – jfriend00

@ jfriend00： - 更新了我的答案..謝謝 – Pranav

更改圖片加載後的文本

回答

相關問題