Есть ли способ объединить $ (document) .ready и $ (window) .resize вместе, чтобы они вызывали только 1 функцию?

У меня есть следующий код ниже и как-то каждый раз, когда я запускаю файл, $ (document) .ready будет вызывать showViewportSize(); и будет печатать 1 набор из 10 видео. Затем, когда размер окна изменяется, хотя мое видео распечатывается с новым размером размера, он печатает еще один набор из 10 видеороликов после первого набора. Это не переписывание видеороликов из $ (документа) .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>

источник

2015-07-06 Judith Tan

Просто измените

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

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

так, как вы изначально делали это определили два отдельных анонимных функций, которые оба вызова showViewportSize(). То, как я сменил его на вызовы showViewportSize напрямую, и передаст в event объект в качестве первого параметра.

источник

2015-07-06 03:40:43 Derek

Привет, брат! я попытался, но видео постоянно печатает при каждом изменении размера. Например, при загрузке документа он печатает видео 1 раз. при изменении размера окна он сохраняет печать в другое время. почему это происходит?? –

потому что тот что функция делает. это звучит так, как будто вам нужна одна функция, которая загружает и печатает, и тот, который просто печатает. поэтому переформатируйте это на две функции: одну, которая просто печатает, и та, которая загружается, и CALLS - тот, который печатает. – Derek

это так? function showVideo() { showViewportSize(); \t для (var a = 0; a '); \t \t \t }} $ (документ) .ready (showVideo); $ (окно) .resize (showVideo); –

Да, вы можете. Вы можете связать его с оба нагрузкой и изменения размера (или готовы) событие в том же строке, как показано ниже:

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

Надеется, что это помогает.

источник

2016-04-28 16:53:21 anti000gravity

Есть ли способ объединить $ (document) .ready и $ (window) .resize вместе, чтобы они вызывали только 1 функцию?

ответ

Смежные вопросы