www.webdeveloper.com
Results 1 to 2 of 2

Thread: Not all Pictures are loading

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Question Not all Pictures are loading

    Hello,

    I built a small website for friend of mine. It is all about pictures. The pictures are shown in a thumbnail. I created a small script, that shows a "loading circle" first and changes the src of this image to the actual thumbnail, after the page is loaded. My problem is, that when you first meet the website, not all of the loading circles will be replaced with the actual thumbnail. You need to reload the page 1-2 times and then you can see all the thumbnails. I have no idea, why this is happening It is really annoying and makes the website look very unprofessional. Do you have any idea how I can force the website to load all thumbnails? Here is one page of the website itself:

    http://derwegistdasziel.net/gallery.php?gal=sued

    Here is a picture of the incomplete loading:
    http://www7.pic-upload.de/thumb/14.1...ribuih7ynh.jpg

    Here is the HTML-Code for the loading circle:
    Code:
    <a title='' rel='gallery_group' href='Pic/nord/sized/20120225-IMG_6393.jpg'><img data-src='Pic/nord/thumb/20120225-IMG_6393.jpg' src='images/blank.png' alt=''></img></a>
    And here is the code, that changes the src to the actual thumbnail:
    Code:
    function neueSrc () {
    var all = document.getElementsByTagName("img");
    	for (var i=0, max=all.length; i < max; i++) {	
    		 all[i].src = all[i].getAttribute('data-src');
    	}
    }
    The code is executed, when the page is loaded:
    Code:
    <body id="top" onload="neueSrc()">
    I am very greatful for any help

    Thank you very much,
    Oli

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    try this way

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <base href="http://derwegistdasziel.net/" />
    <style>
    body{color:#fff;background-color:#000;}
    #ldr{display:none;}
    </style>
    <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
    <script>
    function gogo(cntr){
    if(cntr<max){
    $('#ldr').empty();
    var val=$('img[src*="loading.gif"]:first').data('src');
    $('#ldr').html('<img id="tempimg" src="'+val+'" />');
    $('img[src*="loading.gif"]:first').attr('alt','loading');
    $('#tempimg').load(function(){
    var src=$(this).attr('src');
    $('img[src*="loading.gif"]:first').attr('alt','').attr('src',src);
    cntr++;
    gogo(cntr);
    });
    }
    else{
    // remove the below alert and uncomment the next line
    alert('All images loaded\nmax='+max+'\ncntr='+cntr+'\n$(\'img[src*="loading.gif"]\').length='+$('img[src*="loading.gif"]').length);
    // return;
    }
    }
    
    var cntr=0,max=0;
    
    $(document).ready(function(){
    var loading='http://my.icons.free.fr/system/pics/loading.gif';
    $('body').append('<div id="ldr"><img src="'+loading+'" /></div>');
    max=$('img[src*="blank.png"]').length;
    $('img[src*="blank.png"]').attr('src',loading);
    gogo(cntr);
    });
    </script>
    </head>
    <body>
    <div class="gallery">	  
    <ul>	
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120119-IMG_1800.jpg'><img data-src='Pic/sued/thumb/20120119-IMG_1800.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120119-IMG_1834.jpg'><img data-src='Pic/sued/thumb/20120119-IMG_1834.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120119-IMG_1925.jpg'><img data-src='Pic/sued/thumb/20120119-IMG_1925.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120120-IMG_1977.jpg'><img data-src='Pic/sued/thumb/20120120-IMG_1977.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120120-IMG_2014.jpg'><img data-src='Pic/sued/thumb/20120120-IMG_2014.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120122-IMG_2153.jpg'><img data-src='Pic/sued/thumb/20120122-IMG_2153.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120122-IMG_2154.jpg'><img data-src='Pic/sued/thumb/20120122-IMG_2154.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120125-IMG_2326.jpg'><img data-src='Pic/sued/thumb/20120125-IMG_2326.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120125-IMG_2332.jpg'><img data-src='Pic/sued/thumb/20120125-IMG_2332.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120126-IMG_2527.jpg'><img data-src='Pic/sued/thumb/20120126-IMG_2527.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120126-IMG_2574.jpg'><img data-src='Pic/sued/thumb/20120126-IMG_2574.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120128-IMG_2676.jpg'><img data-src='Pic/sued/thumb/20120128-IMG_2676.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120128-IMG_2948.jpg'><img data-src='Pic/sued/thumb/20120128-IMG_2948.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120202-IMG_3313.jpg'><img data-src='Pic/sued/thumb/20120202-IMG_3313.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120204-IMG_3492.jpg'><img data-src='Pic/sued/thumb/20120204-IMG_3492.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120205-IMG_3573.jpg'><img data-src='Pic/sued/thumb/20120205-IMG_3573.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120208-IMG_3782.jpg'><img data-src='Pic/sued/thumb/20120208-IMG_3782.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120211-IMG_4042.jpg'><img data-src='Pic/sued/thumb/20120211-IMG_4042.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120211-IMG_4073.jpg'><img data-src='Pic/sued/thumb/20120211-IMG_4073.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120211-IMG_4146.jpg'><img data-src='Pic/sued/thumb/20120211-IMG_4146.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120212-IMG_4368.jpg'><img data-src='Pic/sued/thumb/20120212-IMG_4368.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120212-IMG_4464.jpg'><img data-src='Pic/sued/thumb/20120212-IMG_4464.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120215-IMG_4756.jpg'><img data-src='Pic/sued/thumb/20120215-IMG_4756.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120215-IMG_4891.jpg'><img data-src='Pic/sued/thumb/20120215-IMG_4891.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120215-IMG_4967.jpg'><img data-src='Pic/sued/thumb/20120215-IMG_4967.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120215-IMG_5013.jpg'><img data-src='Pic/sued/thumb/20120215-IMG_5013.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120216-IMG_5373.jpg'><img data-src='Pic/sued/thumb/20120216-IMG_5373.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120216-IMG_5384.jpg'><img data-src='Pic/sued/thumb/20120216-IMG_5384.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120216-IMG_5489.jpg'><img data-src='Pic/sued/thumb/20120216-IMG_5489.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120217-IMG_5535.jpg'><img data-src='Pic/sued/thumb/20120217-IMG_5535.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120217-IMG_5579.jpg'><img data-src='Pic/sued/thumb/20120217-IMG_5579.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120220-IMG_6021.jpg'><img data-src='Pic/sued/thumb/20120220-IMG_6021.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120220-IMG_6056.jpg'><img data-src='Pic/sued/thumb/20120220-IMG_6056.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120221-IMG_6199.jpg'><img data-src='Pic/sued/thumb/20120221-IMG_6199.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120325-IMG_1507.jpg'><img data-src='Pic/sued/thumb/20120325-IMG_1507.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120326-IMG_1561.jpg'><img data-src='Pic/sued/thumb/20120326-IMG_1561.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120326-IMG_1592.jpg'><img data-src='Pic/sued/thumb/20120326-IMG_1592.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120329-IMG_1938.jpg'><img data-src='Pic/sued/thumb/20120329-IMG_1938.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120331-IMG_5804.jpg'><img data-src='Pic/sued/thumb/20120331-IMG_5804.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120331-IMG_5885.jpg'><img data-src='Pic/sued/thumb/20120331-IMG_5885.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120401-IMG_8513.jpg'><img data-src='Pic/sued/thumb/20120401-IMG_8513.jpg' src='images/blank.png' alt='' /></a></li> 
    <li><a title='' rel='gallery_group' href='Pic/sued/sized/20120401-IMG_8523.jpg'><img data-src='Pic/sued/thumb/20120401-IMG_8523.jpg' src='images/blank.png' alt='' /></a></li> 
    </ul>		 
    <br class="clear" />
    </div>
    </body>
    </html>
    live demo

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles