CODEWITHSUNDEEP
jqueryhtml
idontwantnoscrubs
idontwantnoscrubs

Reputation: 225

Function only firing on resize, not on page load

I previously asked a question in order to get the code that I do have, but I wanted to ask a separate question to get help with the next issue that I am having. What I am doing is using adobe scene 7 to create image presets and then swapping out the ends of the urls so that on mobile we are delivering much smaller images to increase the overall speed of our site. I am trying to do two things.

1) this code only works when the page is resized, I cannot figure out how to make this work on page load. If the window is 850 or higher I would like the image to automatically change to the bigger image, and if the screen is smaller than 850 then it would load the smaller image. The images will be loaded at mobile size in the html so that on mobile the smaller image loads and then on desktop the jquery will make the bigger image replace it.

2) This is only for one type of image. Is there a way that I can make this code work for multiple different items? For example the code below is for our home page banners, but we would need code for product images, product thumbnails, product videos etc.. For product images we'd change $productmobile$ to $productfull$. If this doesn't make sense then I can answer any questions.

$(window).resize(function(){
  if ($(window).width() >= 850){    
    $('img').attr('src', function(index, existingSrc){
 return existingSrc.replace('$carousel$', '$homebannerfull$');
});
}   
});

$(window).resize(function(){
  if ($(window).width() <= 850){    
     $('img').attr('src', function(index, existingSrc){
        return existingSrc.replace('$homebannerfull$', '$carousel$');

});
}   
});

jsfiddle link (to make this work you have to slide the middle bar back and forth to make the width of the "result" window change )

edit: removed repetition.

Upvotes: 0

Views: 75

Answers (3)

Andrew
Andrew

Reputation: 1324

The best method to execute code after page load with jQuery is using the

$(document).ready(function(){ /* executed after page load */});

First of all I took the liberty of making your code slightly more efficient by reducing it into one block. Now you'll need to call that code once for the page load and once per resize.

//executes after page load
$(document).ready(function(){
  if ($(window).width() >= 850){    
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$carousel$', '$homebannerfull$');
    }
  }
  else{
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$homebannerfull$', '$carousel$');
    }
  }
});

//executes on resize
$(window).resize(function(){
  if ($(window).width() >= 850){    
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$carousel$', '$homebannerfull$');
    }
  }
  else{
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$homebannerfull$', '$carousel$');
    }
  }
});

Since this is the same code being executed twice, it would be better to separate it into one function, then call that function twice, but you need to leave it separate if you want to handle each case differently.

In regards to the second part of your question, yes, you could apply this code to other images. To do that you would need to change the selector $('img') to select the new element and the $_mobile and $_full vars to whatever the other source would be.

Upvotes: 0

miglio
miglio

Reputation: 2058

you have to create all in a function, like this:

var _resize = function(){
    if ($(window).width() >= 850){  
        $('img').attr('src', function(index, existingSrc){
            return existingSrc.replace('$carousel$', '$homebannerfull$');
        });
    }
    if ($(window).width() < 850){  
        $('img').attr('src', function(index, existingSrc){
            return existingSrc.replace('$homebannerfull$', '$carousel$');
        });
    }   
}
$(window).resize(function(){
    _resize();
});
_resize();

for differents pages, maybe you can create an array, but you have to validate the type of page(like home,product,collects,other...)

wrap the imgages with divs like:

//html
<div class="product">
    <img alt="" src="http://s7d2.scene7.com/is/image/scrubs/sb-hpb-bogo50-landau-20150928?$carousel$" data-src="http://s7d2.scene7.com/is/image/scrubs/2261rh_redhearts?$carousel$">
</div>
<div class="produc-thumb">
    <img alt="" src="http://otherimage.jpg?other_$carousel$" />
</div>

//script
var _resize = function(imgs){
    if ($(window).width() >= 850){  
        $('.product .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_images[0], imgs.product_images[1]);
        });
        $('.product-thumb .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_thumb[0], imgs.product_thumb[1]);
        });
    }
    if ($(window).width() < 850){  
        $('.product .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_images[1], imgs.product_images[0]);
        });
        $('.product-thumb .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_thumb[1], imgs.product_thumb[0]);
        });
    }   
}
//array of images in an object
var imgs = {
    "home":['other1_$carousel$','other1_$homebannerfull$'],
    "product_images":['$carousel$','$homebannerfull$'],
    "product_thumb":['other_$carousel$','other_$homebannerfull$']
};
//onload
$(window).resize(function(){
    _resize(imgs);
});
_resize(imgs);

Upvotes: 1

Adam Mazzarella
Adam Mazzarella

Reputation: 763

You can do this by triggering your function:

$(window).trigger('resize');

Also make sure to wrap your code in a document ready.

Upvotes: 0

Related Questions