CODEWITHSUNDEEP
javascripthtmlcssimagemobile
ellic
ellic

Reputation: 798

Image-loaded-show function by javascript in mobile browser

I'am using the following javascript code to implement image-loaded-show function in mobile web browser (supporting HTML5). Image-loaded-show means that before the image is completely loaded, the width and height is 0, namely it willn't show and occupy any space.

Now the problem is that the images will not show until all the images are loaded.

What I need is that the iamge in the page is seperate, once loaded, the image show up.

Any tips on how to modify this javascript code? thanks.

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

The source code of the page is :

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

P.S: Because I need to write this javascript string in C#, I replace the (") into (').

Edited: Is the following right:

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

Besides, the css code is:

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

But the images still wouldn't show until all are loaded.

Upvotes: 0

Views: 748

Answers (1)

Stumpy7
Stumpy7

Reputation: 252

I'm not 100% sure I understand your question. Are you trying to hide the image until it is fully loaded? Are you writing the images out to the page, or are they already in the page? Here are a couple of options:

  1. set style="display:none". Then add onload="this.style.display='';" event listener to image. images will each show as they are loaded.

  2. if you are able to change the c# code, then simply write all the image urls out as a list of strings into an imageload function. Then use this function to create the images and add them to the content div.

I hope this helps you. If not, please provide more context, and I will try to help farther.

Ok, I see where you are going now. You can take out all that javascript that you have written. Maybe print it out so that you can throw it in the trash. Then take my example here... and it will do the trick for you. each image shown only as it is loaded. Obviously if you want to change any other properties you can do it in the showImage function. hope this helps. 

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

Upvotes: 1

Related Questions