圖像加載放映功能由JavaScript在移動瀏覽器

我'。 Image-loaded-show表示在圖像完全加載之前，寬度和高度爲0，即不會顯示並佔用任何空間。圖像加載放映功能由JavaScript在移動瀏覽器

現在的問題是，圖像不會出現，直到所有的圖像加載。

我需要的是，在頁面的iamge是獨立的，一旦加載，圖像顯示出來。

如何修改這段JavaScript代碼的任何提示？謝謝。

   <script type='text/javascript'> 

       var srcs = []; 
       window.doBindLinks = function() { 

       var elems = document.getElementsByTagName('img'); 
        for (var i = 0; i < elems.length; i++) { 
         var elem = elems[i]; 
         var link = elem.getAttribute('src'); 
         elem.setAttribute('link', link); 
         elem.removeAttribute('width'); 
         elem.removeAttribute('height'); 
         elem.removeAttribute('class'); 
         elem.removeAttribute('style'); 
         if(link.indexOf('.gif')>0) 
         { 
          elem.parentNode.removeChild(elem); 
         }else{ 
         } 
        } 
        var content = document.getElementById('content'); 
         var images = content.getElementsByTagName('img'); 
         for (var i = 0; i < images.length; i++) { 
          srcs[i] = images[i].src; 
         loadImage(images[i], srcs[i], 
           function (cur, img, cached) { 
            cur.src = img.src;}, 
           function (cur, img) { 
         cur.style.display = 'none';}); 
         } 

       }; 
       var loadImage = function (cur, url, callback, onerror) { 
          var img = new Image(); 
          img.src = url; 
          img.width = '100%'; 
         if (img.complete) { 
          callback && callback(cur, img, true); 
          return; 
          } 
         img.onload = function() { 
         callback && callback(cur, img, true); 
         return; 
        }; 

        if (typeof onerror == 'function') { 
         img.onerror = function() { 
          onerror && onerror(cur, img); 
         } 
        } 
       }; 
       </script>

頁面的源代碼是：

<body onload="doBindLinks();"><div id="content"> images and text </div></body>

PS：因爲我需要寫在C＃這個JavaScript字符串，我更換（「）到（'）

。編輯：是下列權利：

window.doBindLinks = function() { 

       var elems = document.getElementsByTagName('img'); 
        for (var i = 0; i < elems.length; i++) { 
         var elem = elems[i]; 
         var link = elem.getAttribute('src'); 
         elem.setAttribute('link', link); 
         elem.removeAttribute('width'); 
         elem.removeAttribute('height'); 
         elem.removeAttribute('class'); 
         elem.removeAttribute('style'); 
         elem.setAttribute('display','none'); 
         if(link.indexOf('.gif')>0) 
         { 
          elem.parentNode.removeChild(elem); 
         }else{ 
         } 
         elem.attachEvent('onload',onImageLoaded); 
        }   
       }; 
       window.onImageLoaded = function() { 
        var elem = event.srcElement; 
        if (elem != null) { 
         elem.setAttribute('display','block'); 
        } 
        return false; 
       };

此外，CSS代碼爲：

img {width: 100%; border-style:none;text-align:center;}

但是，圖像仍然不會顯示，直到所有加載。

來源

2012-02-22 ellic

我不是100％確定我理解你的問題。你是否試圖隱藏圖像，直到完全加載？你是將圖像寫入頁面，還是已經在頁面中？這裏有幾個選項：

set style =「display：none」。然後添加onload =「this.style.display ='';」事件監聽器映像。當他們被加載時，每個圖像將顯示。
，如果你能夠改變的C＃代碼，然後簡單的寫所有圖片網址作爲出字符串列表到imageload功能。然後使用此功能創建圖像並將它們添加到內容div。

我希望這可以幫助你。如果沒有，請提供更多背景，我會盡力幫助更遠。

好吧，我看到你走了。你可以取出你寫的所有JavaScript。也許會打印出來，以便將它扔進垃圾箱。然後以我的例子爲例...它會爲你做詭計。每張圖片僅在加載時顯示。顯然，如果你想改變任何其他屬性，你可以在showImage函數中做到這一點。希望這可以幫助。

<html> 
<head> 
<style> 
img{display:none;} 
</style> 
<script type="text/javascript"> 
    function showImage(elem) { 
    elem.style.display = 'block'; 
    } 
</script> 
</head> 
<body><div id="content"> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" /> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" /> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" /> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" /> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" /> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" /> 
    </dvi> 
</body> 
</html>

來源

2012-02-22 13:21:20 Stumpy7

是的，我試圖隱藏圖像，直到它完全加載。我感謝第一個選項將滿足我的需求。但我不熟悉JavaScript（我是C＃開發人員> _ <）。你能給我更多提示嗎？謝謝。 – ellic 2012-02-22 13:38:05

插入你的圖片標籤，像這樣： – Stumpy7 2012-02-22 13:50:12

不錯，@Stumpy7，我編輯了這個問題。你能告訴我代碼是否正確？ – ellic 2012-02-22 14:15:53

圖像加載放映功能由JavaScript在移動瀏覽器

回答

相關問題