Question

我在下面有以下代码，不知何故每次运行文件时，$（document）.ready都会调用showViewportSize（）;并将打印1组10个视频。接下来，当窗口调整大小但我的视频以新的调整大小打印出来时，它会在第一组之后打印另一组10个视频。它不会覆盖$（document）.ready !!中生成的视频。任何人都可以帮助我如何重新编辑这个，以便当文档加载，视频将打印，何时调整大小，视频将动态调整大小，但不会再次调整大小时打印。

<!DOCTYPE html> 
<html> 

<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery-1.10.1.min.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>


<body>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="videoHolder"></div>
<script  type="text/javascript">

 window.oncontextmenu = function() {
    return false;
  };

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();

    }
  else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }


    xmlhttp.open("GET","amk6.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;


var videoheight = xmlDoc.getElementsByTagName("height");
var videowidth = xmlDoc.getElementsByTagName("width");
var numcameras=xmlDoc.getElementsByTagName("CameraCount");
var vidht =  videoheight[0].childNodes[0].nodeValue ;
var vidwh =  videowidth[0].childNodes[0].nodeValue ;
var numCam = numcameras[0].childNodes[0].nodeValue;
var cameraID = xmlDoc.getElementsByTagName("CameraID");
var title = xmlDoc.getElementsByTagName("title");
var type = xmlDoc.getElementsByTagName("type");
var vidtype = type[0].childNodes[0].nodeValue;
<!-- document.write('<h2>vidheight:</h2>'+ vidht);
<!-- document.write('<h2>vidwidth:</h2>'+ vidwh); -->
<!-- document.write('<h2>numCam:</h2>'+ numCam); -->
 -->
var scrht;
var scrwh;
var rscale;
var numCols;
var numRows;
var numCells;
var boxht;
var boxwh;


$(document).ready(function(e) {
   showViewportSize();
});
$(window).resize(function(e) {
   showViewportSize();
});
function showViewportSize() {
   scrwh = $(window).width();
   scrht = $(window).height();
     rscale = 1.0;
     numCols = Math.floor(scrwh/(rscale*vidwh));
     numRows = Math.floor(scrht/(rscale*vidht));
     numCells = numRows * numCols;
     while((numCells < numCam)&(rscale > 0.1)){
       rscale -= 0.02;
         numCols = Math.floor(scrwh/(rscale*vidwh));
         numRows = Math.floor(scrht/(rscale*vidht));
         numCells = numRows * numCols;
     }
     if (numCells >= numCam)
     {
            boxwh = Math.floor(rscale*vidwh);
            boxht = Math.floor(rscale*vidht);
        }
        else
        {
            boxwh = vidwh;
            boxht = vidht;
        }
for(i=0;i<=cameraID.length;i++) {

    var CamID =  cameraID[i].childNodes[0].nodeValue ;

    $('#videoHolder').append('<video height="' + boxht + '"' + 'width="' + boxwh + '"'  
    + 'title="' + CamID + '"' + 'autoplay loop ><source src="' + CamID + '.'
     + vidtype + '"' + 'type="video/' + vidtype + '"></source></video>');
}


   $('#width').text(scrwh);
   $('#height').text(scrht);
     $('#scale').text(rscale);
     $('#rows').text(numRows);
     $('#cols').text(numCols);
     $('#boxwidth').text(boxwh);
     $('#boxheight').text(boxht);



}


</script>
</body>

Answer 1

是的，你可以。您可以将其绑定到加载和调整大小（或就绪）事件，如下所示：

$(window).on('load resize', function () {
// your code
});

希望这有帮助。

Answer 2

只需更改

$(document).ready(function(e) {
   showViewportSize();
});
$(window).resize(function(e) {
   showViewportSize();
});

到

$(document).ready(showViewportSize);
$(window).resize(showViewportSize);

您最初的方式定义了两个单独的匿名函数，它们都调用showViewportSize()。我将其更改为直接调用showViewportSize的方式，并将event对象作为第一个参数传递。

有没有办法将$（document）.ready和$（window）.resize组合在一起，所以他们只调用1个函数？

2 个答案: