移动浏览器中javascript的图像加载显示功能_Javascript_Html_Css_Image_Mobile

移动浏览器中javascript的图像加载显示功能

javascript html css image mobile

移动浏览器中javascript的图像加载显示功能,javascript,html,css,image,mobile,Javascript,Html,Css,Image,Mobile,我正在使用以下javascript代码在移动web浏览器（支持HTML5）中实现图像加载显示功能。图像加载显示是指在图像完全加载之前，其宽度和高度为0，即不显示并占用任何空间现在的问题是，在加载所有图像之前，图像不会显示我需要的是页面中的图像是分开的，一旦加载，图像就会显示出来关于如何修改此javascript代码的任何提示？谢谢 <script type='text/javascript'> var srcs =

我正在使用以下javascript代码在移动web浏览器（支持HTML5）中实现图像加载显示功能。图像加载显示是指在图像完全加载之前，其宽度和高度为0，即不显示并占用任何空间

现在的问题是，在加载所有图像之前，图像不会显示

我需要的是页面中的图像是分开的，一旦加载，图像就会显示出来

关于如何修改此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>

但是，在全部加载之前，图像仍然无法显示。

我不能100%确定我是否理解您的问题。在图像完全加载之前，是否尝试隐藏图像？您是将图像写入页面，还是它们已经在页面中？以下是几个选项：

设置style=“显示：无”。然后将onload=“this.style.display=”；“事件侦听器添加到图像。图像将在加载时显示

如果您能够更改c代码，那么只需将所有图像URL作为字符串列表写入imageload函数即可。然后使用此函数创建图像并将其添加到content 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>


img{显示：无；}
函数showImage（elem）{
elem.style.display='block'；
}

是的，我正在尝试隐藏图像，直到图像完全加载。我感谢第一个选择将满足我的需要。但是我不熟悉javascript（我是一名C#开发者）>\u插入你的图像标签如下：很好，@Stumpy7，我已经编辑了这个问题。你能告诉我代码是否正确吗？将css代码更改为：img{width:100%；border style:none；text align:center；display:none；}然后不必将图像设置为在javascript中显示：无。然后将此行更改为：elem.setAttribute（'display'，'block'）；改为elem.setAttribute（'style'，'display:block'）；只要图像上没有其他样式。或者，您可以使用elem.style.display='none'；抱歉，我不知道如何在注释区域添加换行符。似乎“elem.attactEvent（'onload'，onImageLoaded'）不会触发onload事件。

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;
                };

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

<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>