-2

Can someone please verify if the code below should work. I don't see any logical mistakes but it's not changing the images based on my screen size. It's only displaying the larger images. I have searched a lot but didnt find any help in preloading images based on screen resolution is this something not possible? The images do load but when i switch my web page from the big monitor to my laptop screen the image doesn't appear fully because it's too big 

    <html>
        <head>
        <script type="text/javascript">

        var num;
        var temp=0;
        var speed=9000; 
        var preloads=[];
        var w = screen.width;

        if(w <=588) {
                preload(
                '../images/1.jpg',
                '../images/2.jpg',
                '../images/3.jpg'
                );
            }   
        else if(w>588 && w<=1366)
        {
         preload(
                '../images/1.jpg',
                '../images/2.jpg',
                '../images/3.jpg'
                );
            }

        else{
         preload(
                '../images/5.jpg',
                '../images/6.jpg',
                '../images/7.jpg'
                );
        }       




function preload(){

for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}

function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
if(num==temp){
rotateImages();
}
else {
document.body.style.backgroundImage='url('+preloads[num].src+')';
temp=num;



setTimeout(function(){rotateImages()},speed);
}
}

if(window.addEventListener){
window.addEventListener('load',rotateImages,false);
}
else { 
if(window.attachEvent){
window.attachEvent('onload',rotateImages);
}
}

     </script>
CrazyCoder
  • 23
  • 1
  • 7
  • You are missing the preload() function there. Look here for an example: http://stackoverflow.com/questions/3646036/javascript-preloading-images – Michal Cumpl Jan 26 '17 at 19:38
  • I am not missing it, I didn't add it but now I have added it. The reason I didn't add it is because I thought the issue is in my preloading images code because it is displaying images my function is working its just the fact that its not displaying according to the screen resolution... – CrazyCoder Jan 26 '17 at 19:42
  • There is something wront with my code. I need help. When I just try to get the value of screen.width, it comes out blank, its not recognizing the screen.width. Is that something I cannot use? – CrazyCoder Jan 26 '17 at 20:05
  • add this after where you set the backgroundImage { document.body.style.backgroundSize = '100%';} – garek007 Jan 26 '17 at 20:42
  • Hello, it didnt change anything.... :( – CrazyCoder Jan 26 '17 at 20:54
  • I thought your problem was that the image is bigger than the screen? for me, adding that line made it width 100%. Does that not happen for you? Did you add it i the right place? – garek007 Jan 26 '17 at 22:25
  • hello, no the problem is that I want to preload smaller images when the screen is smaller. There are two pre loads in my script based on my screen width if the screen width is less than or equal to 1366 than I want o load the images with the -s if the screen is bigger than I want to load the images with no -s? does that make sense? – CrazyCoder Jan 27 '17 at 15:16

1 Answers1

0

This is working for me. You need window.innerWidth; screen.width was getting the width of the entire screen so it was never detecting your reduced window size.

 <html>
        <head>
        <script type="text/javascript">

        var num;
        var temp=0;
        var speed=9000; 
        var preloads=[];
        var w = window.innerWidth;
          console.log(w);

        if(w <588) {
                preload(
                '1.jpg',
                '2.jpg',
                '3.jpg'
                );
            }   
        else if(w>588 && w<=1366)
        {
         preload(
                '4.jpg',
                '5.jpg',
                '6.jpg'
                );
            }

        else{
         preload(
                '5.jpg',
                '6.jpg',
                '7.jpg'
                );
        }       




function preload(){

  for(var c=0;c<arguments.length;c++) {
    preloads[preloads.length]=new Image();
    preloads[preloads.length-1].src=arguments[c];
  }
}

function rotateImages() {
  num=Math.floor(Math.random()*preloads.length);
  if(num==temp){
    rotateImages();
  }
  else {
    document.body.style.backgroundImage='url('+preloads[num].src+')';
    document.body.style.backgroundSize  = '100%';
    document.body.style.backgroundRepeat = "no-repeat";
    temp=num;
    setTimeout(function(){rotateImages()},speed);
  }
}

  if(window.addEventListener){
  window.addEventListener('load',rotateImages,false);
  }
  else { 
  if(window.attachEvent){
  window.attachEvent('onload',rotateImages);
  }
}

     </script> 

   </head>

    <body>
          </body>
</html>
garek007
  • 395
  • 4
  • 15