SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Image preloader

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Image preloader

    I would like to get some feedback on a image preloader i have implemented on a solution.

    Code:
    $(document).ready(function() {
    
    // preload images
    function preloadImages(images) {   
    var i, newImage;    
    for (i=0; i<images.length; i++){       
     newImage = new Image();        
     newImage.src = images[i];    
    }} 
    
    var imageSrc = new Array();
    
    // preload images people
    if($('.people img').length > 0) {
    $('.people img').each(function(i) { imageSrc[i] = $(this).attr('src'); });
    }
    
    // preload slider images
    if($('#slider img').length > 0) {
    $('#slider img').each(function(i) { imageSrc[i] = $(this).attr('src'); });
    }
    
    var imageSrc = imageSrc.join(',');
    preloadImages([imageSrc]);
    
    });
    Is it ok to do it that way?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In my head something like this should work fine

    Code JavaScript:
    $(function() {
        // Preload a specific set of images
        $('.people img, #slider img').each(function() {
            var img = new Image();
            img.src = $(this).attr('src');
        });
    });

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it looks good - like the simplicity :-)

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a question regarding swapping / mouseover images
    My images are listed like this

    HTML Code:
    <img src="wp-content/uploads/2011/04/Anja_Hansen_12.jpg" class="people" rel="wp-content/uploads/2011/04/Anja_Hansen_12_hover.jpg" />
    I retrieve the mouseover image by the rel tag
    How do i best preload those images? There quite a lot of images so it is vital with a good image preloader also for the mouseover image

    Do i just add

    Code:
    $(function() {    
    // Preload a specific set of images    
    $('.people img, #slider img').each(function() {        
    var img = new Image();        
    img.src = $(this).attr('src');    
    img.src = $(this).attr('rel');
    });
    });

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try this

    Code JavaScript:
    $(function() {
        // Preload a specific set of images
        $('.people img, #slider img').each(function() {
            var img = new Image();
            img.src = $(this).attr('src');
     
            if (typeof $(this).attr('rel') !== 'undefined') {
                var rel = new Image();
                rel.src = $(this).attr('rel');
            }
        });
    });

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot :-)

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your welcome

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    I rewrote the script a bit
    But there seems to a loading issue. I have to confess that my page loads 136 pictures 202x302 20kb per picture.

    My page keep loading for quite a while. Is it wrong to use each function?

    Code:
    // preload images    
    people = new Array();
    people_swap = new Array();
    $('body.category-people img').each(function(i) {
    	var obj = $(this);	 
    	people[i] = new Image();        
    	people[i].src = obj.attr('src');
    
    	people_swap[i] = new Image();        
    	if(obj.attr('data-hover') !== undefined) {
    	  people_swap[i].src = obj.attr('data-hover');
    	}
    
    });
    
    $('.people img').hover(
        function() {
    	var obj = $(this);
    	if(obj.attr('data-hover') !== undefined) {
    	  var urlID = obj.attr('data-hover').split('#');
    	  obj.attr('src') = people_swap[urlID[0]].src;
    	}
    },
    	function() {
    	  var urlID = $(this).attr('data-hover').split('#');
    	  $(this).attr(src) = people[urlID[0]].src;
    	}
    );
    HTML Code:
    <img src="/wp-content/uploads/2011/04/test.jpg" data-hover="/wp-content/uploads/2011/05/test_hover.jpg#1" alt="" />
    
    <img src="/wp-content/uploads/2011/04/test2.jpg" data-hover="/wp-content/uploads/2011/05/test2_hover.jpg#2" alt="" />


Tags for this Thread

Bookmarks

Posting Permissions

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