Question

有人可以验证以下代码是否有效。我没有看到任何逻辑错误，但它没有根据我的屏幕大小更改图像。它只显示较大的图像。我已经搜索了很多，但没有找到任何帮助预加载基于屏幕分辨率的图像这是不可能的吗？图像确实加载但是当我将我的网页从大显示器切换到我的笔记本电脑屏幕时，图像显示不完全，因为它太大了

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

Answer 1

这对我有用。你需要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>

javascript语法更正

1 个答案: