Script etc. zum zyklischen Anzeigen für Websites in Firefox?

HaWe · 08.03.2018, 19:11

ok, danke, steuern können ist an sich ja immer gut

, aber weil die Seiten ja nur ca. 10-15 sec. angezeigt werden, wäre "immer aktualisieren" eigentlich absolut perfekt, gerade weil zwischendurch auch oft Ladefehler passieren!

**Ceos** · 09.03.2018, 14:36

Finale Fassung!!!!

ich habe die links in ein array gepackt und nur minimales feedback eingebaut, wenn man zu wenig einträge ind er liste hat doer wenn der script das wrapper div nicht finden kann!
außerdem habe ich den code mal kommentiert zum verständnis und in dem array kann man auch sagen ob die seite NACH DEM FADEOUT neu geladen werden soll oder nicht (soll bedeuten die pages laden gleich NACH dem ausblenden neu, sind also nicht top aktuell, dafür müsste ich mir nochmal einen in der logik abbrechen um quasi das übernächste object zu reloaden während das aktuelle angezeigt wird doer so)

Code:

<!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }
      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script>
      <script type="text/javascript">
      
         //define list for all websites to cycle
         var URIList = [ 
            {"data": "https://www.onvista.de/index/DAX-Index-20735", reload: false},
            {"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: false},
            {"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: false},
            {"data": "https://www.onvista.de/aktien/Alibab...e-US01609W1027", reload: false},
            {"data": "https://www.onvista.de/aktien/Facebo...e-US30303M1027", reload: false},
            {"data": "http://www.zeitzonen.de/deutschland.html", reload: true}
         ];
         
         //creates an object JQUERY node with the defined website that can be attached anywhere
         function createContent(data)
         {
            var newcontent = document.createElement("object");
            newcontent.style.position = "fixed"; 
            newcontent.style.top = 0; 
            newcontent.style.left = 0; 
            newcontent.style.minWidth = "100%"; 
            newcontent.style.minHeight = "100%";
            newcontent.id = "content-object";
            newcontent.type = "text/html";
            newcontent.data = data;
            return $(newcontent);
         }
         
         $(document).ready(function ()
         {
            //create our rotating-items
            var divs = [];
            var containers = $("#rotating-item-list");
            if(containers.length == 0)
            {
               alert("NO \"rotating-item-list\" CONTAINER FOUND!")
            }
            else if(containers.length > 1)
            {
               alert("ONLY 1 \"rotating-item-list\" CONTAINER ALLOWED!")
            }
            else
            {
               var divcontainer = containers.get(0);
               URIList.forEach(function(element){

               //create a div that can be faded and uses all displayspace available while overlapping with identical divs
                  var newdiv = document.createElement("div"); 
                  newdiv.style.position = "fixed";
                  newdiv.style.top = 0;
                  newdiv.style.left= 0;
                  if(divs.length > 0)
                  {
                     newdiv.style.display = "none";
                  }
                  else
                  {
                     newdiv.style.display = "block";
                  }
                  newdiv.style.minHeight = "100%";
                  newdiv.style.minHidth = "100%";
                  newdiv.class = "rotating-item";
                  newdiv.sandbox = "";

                  //create an object which loads and displays the page of interest
                  var newcontent = createContent(element.data);
                  
                  //convert DOM to JQUERY
                  newdiv = $(newdiv);

                  //insert content in div
                  newdiv.append(newcontent);

                  //insert div in container
                  divcontainer.append(newdiv.get(0));
                  divs.push(newdiv);
               });
               if(divs.length < 2)
               {
                  alert("TO FEW ENTRYS TO CYCLE");
               }
               else
               {
                  //start after HTML, images have loaded
                  var InfiniteRotator = 
                  { 
                     init: function() 
                     {
                        //initial fade-in time (in milliseconds)
                        var initialFadeIn = 1000;

                        //interval between items (in milliseconds)
                        var itemInterval = 3000;

                        //cross-fade time (in milliseconds)
                        var fadeTime = 1000;

                        //count number of items
                        var numberOfItems = divs.length;//$('.rotating-item').length;

                        //set current item
                        var currentItem = 0;

                        //show first item
                        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
                        
                        var lastItem = -1;

                        //loop through the items    
                        var infiniteLoop = setInterval(function ()
                        {
                           //fade out and when finished reload page
                           divs[currentItem].fadeOut(fadeTime, function (){
                              if(URIList[lastItem].reload == true)
                              {
                                 var fadednode = $(this); //grab JQUERY
                                 fadednode.empty(this.firstChild); //clear content
                                 var newcontent = createContent(URIList[lastItem].data); //create new content
                                 fadednode.append(newcontent); //append new content
                              }
                           });
                           lastItem = currentItem;
                           if(currentItem == numberOfItems -1)
                           {
                              currentItem = 0;
                           }
                           else
                           {
                              currentItem++;
                           }
                           divs[currentItem].fadeIn(fadeTime);
                        }, itemInterval); 
                     } 
                  };
            
                  InfiniteRotator.init();
               }
            }
         });
      </script>    
      <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>
      <div id="rotating-item-list">
      </div>
   </body>
</html>

ACHTUNG: achte mal auf deinen RAM verbrauch, für das reload lösche ich content und erstelle ihn neu, ich hoffe da ist kein memory leak dabei

HaWe · 09.03.2018, 18:06

Zitat von Ceos

Finale Fassung!!!!

ich habe die links in ein array gepackt und nur minimales feedback eingebaut, wenn man zu wenig einträge ind er liste hat doer wenn der script das wrapper div nicht finden kann!
außerdem habe ich den code mal kommentiert zum verständnis und in dem array kann man auch sagen ob die seite NACH DEM FADEOUT neu geladen werden soll oder nicht (soll bedeuten die pages laden gleich NACH dem ausblenden neu, sind also nicht top aktuell, dafür müsste ich mir nochmal einen in der logik abbrechen um quasi das übernächste object zu reloaden während das aktuelle angezeigt wird doer so)

ACHTUNG: achte mal auf deinen RAM verbrauch, für das reload lösche ich content und erstelle ihn neu, ich hoffe da ist kein memory leak dabei

hi,
dankeschön, ich teste es jetzt sofort!
Wie ich das mit dem RAM testen soll, weiß ich allerdings noch nicht....(?)
Hier ist dein Code mit ein paar Anpassungen meinerseits (urls berichtigt/ergänzt, Zeitdauer verlängert):

Code:

<!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }
      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script>
      <script type="text/javascript">
      
         //define list for all websites to cycle
         var URIList = [ 
            {"data": "https://www.onvista.de/index/DAX-Index-20735", reload: true},
            {"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: true},
            {"data": "https://www.onvista.de/etf/DEKA-MDAX-UCITS-ETF-ETF-DE000ETFL441", reload: true},
            {"data": "https://www.onvista.de/etf/DEKA-OEKOM-EURO-NACHHALTIGKEIT-UCITS-ETF-ETF-DE000ETFL474", reload: true},
            {"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: true},
            {"data": "https://www.onvista.de/aktien/Alibaba-Aktie-US01609W1027", reload: true},
            {"data": "https://www.onvista.de/aktien/Facebook-Aktie-US30303M1027", reload: true},
            {"data": "https://www.onvista.de/aktien/TENCENT-HOLDINGS-LTD-Aktie-KYG875721634", reload: true},
            {"data": "http://www.zeitzonen.de/deutschland.html", reload: true}
         ];
         
         //creates an object JQUERY node with the defined website that can be attached anywhere
         function createContent(data)
         {
            var newcontent = document.createElement("object");
            newcontent.style.position = "fixed"; 
            newcontent.style.top = 0; 
            newcontent.style.left = 0; 
            newcontent.style.minWidth = "100%"; 
            newcontent.style.minHeight = "100%";
            newcontent.id = "content-object";
            newcontent.type = "text/html";
            newcontent.data = data;
            return $(newcontent);
         }
         
         $(document).ready(function ()
         {
            //create our rotating-items
            var divs = [];
            var containers = $("#rotating-item-list");
            if(containers.length == 0)
            {
               alert("NO \"rotating-item-list\" CONTAINER FOUND!")
            }
            else if(containers.length > 1)
            {
               alert("ONLY 1 \"rotating-item-list\" CONTAINER ALLOWED!")
            }
            else
            {
               var divcontainer = containers.get(0);
               URIList.forEach(function(element){

               //create a div that can be faded and uses all displayspace available while overlapping with identical divs
                  var newdiv = document.createElement("div"); 
                  newdiv.style.position = "fixed";
                  newdiv.style.top = 0;
                  newdiv.style.left= 0;
                  if(divs.length > 0)
                  {
                     newdiv.style.display = "none";
                  }
                  else
                  {
                     newdiv.style.display = "block";
                  }
                  newdiv.style.minHeight = "100%";
                  newdiv.style.minHidth = "100%";
                  newdiv.class = "rotating-item";
                  newdiv.sandbox = "";

                  //create an object which loads and displays the page of interest
                  var newcontent = createContent(element.data);
                  
                  //convert DOM to JQUERY
                  newdiv = $(newdiv);

                  //insert content in div
                  newdiv.append(newcontent);

                  //insert div in container
                  divcontainer.append(newdiv.get(0));
                  divs.push(newdiv);
               });
               if(divs.length < 2)
               {
                  alert("TO FEW ENTRYS TO CYCLE");
               }
               else
               {
                  //start after HTML, images have loaded
                  var InfiniteRotator = 
                  { 
                     init: function() 
                     {
                        //initial fade-in time (in milliseconds)
                        var initialFadeIn = 1000;

                        //interval between items (in milliseconds)
                        var itemInterval = 15000;

                        //cross-fade time (in milliseconds)
                        var fadeTime = 1000;

                        //count number of items
                        var numberOfItems = divs.length;//$('.rotating-item').length;

                        //set current item
                        var currentItem = 0;

                        //show first item
                        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
                        
                        var lastItem = -1;

                        //loop through the items    
                        var infiniteLoop = setInterval(function ()
                        {
                           //fade out and when finished reload page
                           divs[currentItem].fadeOut(fadeTime, function (){
                              if(URIList[lastItem].reload == true)
                              {
                                 var fadednode = $(this); //grab JQUERY
                                 fadednode.empty(this.firstChild); //clear content
                                 var newcontent = createContent(URIList[lastItem].data); //create new content
                                 fadednode.append(newcontent); //append new content
                              }
                           });
                           lastItem = currentItem;
                           if(currentItem == numberOfItems -1)
                           {
                              currentItem = 0;
                           }
                           else
                           {
                              currentItem++;
                           }
                           divs[currentItem].fadeIn(fadeTime);
                        }, itemInterval); 
                     } 
                  };
            
                  InfiniteRotator.init();
               }
            }
         });
      </script>    
      <title>Infinite Rotating Websites Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>
      <div id="rotating-item-list">
      </div>
   </body>
</html>

**Ceos** · 09.03.2018, 20:33

einfach mal im taskmanager die auslastung des browser beobachten, sollte halt nach 2h nicht irgendwo im mehrstelligen GB bereich liegen

ich bin derzeit bei 5 onvista seiten bei 1.5GB relativ stabil

HaWe · 09.03.2018, 20:43

Zitat von Ceos

einfach mal im taskmanager die auslastung des browser beobachten, sollte halt nach 2h nicht irgendwo im mehrstelligen GB bereich liegen

ich bin derzeit bei 5 onvista seiten bei 1.5GB relativ stabil

ich sehe da keine Browser-Auslastung, nur :

Verlauf cpu-Auslastung (gesamt) in %
und
Arbeitsspeicher/Verwendungsverlauf des physikal. Speichers (gesamt)

PS,
so, neuer Tag, neues Glück:
ich lasse das Script jetzt einmal 2 Stunden lang laufen und vergleiche Gesamt-Speicher jetzt und dann 2 Stunden später.

cpu: i5 4200M, 2(+2) cores, 2,5GHz. 12 GB RAM

Neustart, es lief noch was im Hintergrund mit.

ganz ohne Firefox: 1,4 GB, 0-1% cpu-Auslastung
mit Firefox Roboternetz.de : 1,87 GB, 0-3% cpu-Auslastung

Start Script (14 urls), in einem 2. Tab neben Roboternetz.de, aber im selben Firefox-Window:
sofort ansteigend auf 2,3 GB, 2-32% cpu-Auslastung, im Sekundentakt langsam weiter steigend

nach 3 Minuten: max. 2,60 GB, 2-42% cpu-Auslastung

nach 10 Minuten: max. 2,87 GB, 3-33% cpu-Auslastung

nach 20 Minuten: max. 3,09 GB, 7-44% cpu-Auslastung

nach 30 Minuten: max. 3,08 GB, 4-35% cpu-Auslastung

nach 40 Minuten: max. 3,25 GB, 3-43% cpu-Auslastung

nach 60 Minuten: max. 3,21 GB, 3-38% cpu-Auslastung

nach 90 Minuten: max. 3,23 GB, 1-46% cpu-Auslastung

nach 120 Minuten: max. 3,13 GB, 0-38% cpu-Auslastung
nach 121 Minuten mit aktivem Script-Tab : max. 3,35 GB, 0-38% cpu-Auslastung

Jetzt Schließen des Script-Tabs, nur Roboternetz-Tab aktiv:
nach 122 Minuten: max. 2,04 GB, 0-1% cpu-Auslastung

erst später, während des Tests festgestellt:
die Werte wurden gemessen, als der Tab mit Roboternetz-Thread im Vordergrund war.
holt man zwischenzeitlich den Script-Tab in den Vordergrund, steigen die RAM-Werte durchschnittlich um bis zu 0,25 GB an.
Holt man dann wieder den Roboternetz-Tab in den Vordergrund, fallen sie nach ein paar Sekunden wieder um genau diese (bis zu) 0,25 GB ab.

Daher wurden zur besseren Vergleichbarkeit immer nur die Werte mit Roboternetz-Tab im Vordergrund notiert bzw. angeglichen.

Fazit:
mit 2 Firefox-Tabs, wobei der Script-Tab im Vordergund ist, scheinen 3,35 GB dauerhaft das Maximum zu sein, ansonsten gut 3,1 GB.

Überschießende GB werden sicherlich am ehesten durch Windows-Hintergrund-Tasks verursacht, z.B. auch Windows-Update-Services und Virenschutz-Pprogramme.

**Ceos** · 10.03.2018, 08:47

oh wow, wesentlcih mehr als bei mir, ich habe no-script plugin für meinen firefox, vielleich retten die unterdrückten werbebanner und third-party links einiges an speicher ... aber das ist halt onvista, MASSENHAFT werbung und unnötigen kram auf den chartseiten, eigentlich müsste man hingehen und die wertvollen daten aus den seiten schneiden, aber da hat onvista sicher was dagegen XD

HaWe · 10.03.2018, 11:52

So Testlauf beendet!

Sieht absolut gut aus!
Messwerte hier: https://www.roboternetz.de/community...l=1#post643178

Zitat von HaWe

erst später, während des Tests festgestellt:
die Werte wurden gemessen, als der Tab mit Roboternetz-Thread im Vordergrund war.
holt man zwischenzeitlich den Script-Tab in den Vordergrund, steigen die RAM-Werte durchschnittlich um bis zu 0,25 GB an.
Holt man dann wieder den Roboternetz-Tab in den Vordergrund, fallen sie nach ein paar Sekunden wieder um genau diese (bis zu) 0,25 GB ab.

Daher wurden zur besseren Vergleichbarkeit immer nur die Werte mit Roboternetz-Tab im Vordergrund notiert bzw. angeglichen.

Fazit:
mit 2 Firefox-Tabs, wobei der Script-Tab im Vordergund ist, scheinen 3,35 GB dauerhaft das Maximum zu sein, ansonsten gut 3,1 GB.

Überschießende GB werden sicherlich am ehesten durch Windows-Hintergrund-Tasks verursacht, z.B. auch Windows-Update-Services und Virenschutz-Pprogramme.

Dir, Ceos, nochmals tausend Dank für deine Mühe, das läuft jetzt super gut und absolut stabil!

Echt toll!

Bild hier

**Ceos** · 10.03.2018, 15:30

den Dank kan ichnzurück geben, ich liebe es mich mal mit neuen sachen zu beschäftigen, hat spaß gemacht ... und ich verteufel HTML immernoch dafür dass es wie linux ist, 1000 schalter für dieselbe funktion, nur 3 funktionnieren und wenn man 2 davon gleichzeitig einsetzt knallt es nicht an der stelle sondern erst viel weiter unten wo man es garnicht erwartet