图像加载放映功能由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在移动浏览器

回答

相关问题