2017-01-26 7 views
-2

Может кто-то, пожалуйста, проверьте, работает ли приведенный ниже код. Я не вижу никаких логических ошибок, но это не меняет изображения на основе моего размера экрана. Он отображает только большие изображения. Я много искал, но не нашел никакой помощи в предварительной загрузке изображений на основе разрешения экрана, это что-то не возможно? Изображения делать нагрузки, но когда я переключить веб-страницы с большим монитором на экране моего ноутбука изображение не отображается полностью, потому что это слишком большойкоррекция синтаксиса javascript

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

Вам не хватает функции предварительной загрузки(). Вот пример: http://stackoverflow.com/questions/3646036/javascript-preloading-images –

+0

Я не пропустил его, я его не добавил, но теперь я добавил его. Причина, по которой я не добавлял это, состоит в том, что я думал, что проблема в моем предзагрузочном коде изображений, потому что он отображает изображения, моя функция работает именно с тем, что его отображение не отображается в соответствии с разрешением экрана ... – CrazyCoder

+0

Есть что-то вон с моим кодом. Мне нужна помощь. Когда я просто пытаюсь получить значение screen.width, он выглядит пустым, не распознавая screen.width. Это то, что я не могу использовать? – CrazyCoder

ответ

0

Это работает для меня. Вам нужно window.innerWidth; screen.width получал ширину всего экрана, поэтому он никогда не обнаруживал уменьшенный размер окна.

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

Здравствуйте, спасибо вам за помощь. Мой экран пуст, не загружая изображения. Я скопировал и вставил ваш код. – CrazyCoder

+0

Каковы ваши изображения? Назовите их точно, есть ли у меня их выше – garek007