Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

option · 13-05-2010, 17:38

hi leute!

mit diesem JavaScript lade ich bilder von Flickr:

Code:

<html>
<head>

<script type="text/javascript">
function jsonFlickrFeed(o)
{
    var div = document.getElementById('photoBucket');
    var i = 0;
    while(o.items[i])
    {
        div.innerHTML += '<img src="' + o.items[i].media.m + '" alt="' + o.items[i].title +'">';
        i++;
    }
}
</script>

</head>
<body>

<div id="photoBucket">
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=28203925@N08&lang=en-us&format=json" type="text/javascript"></script>
</div>

</body>
</html>

wie kann man die bilder alle 60 sekunden neu laden ohne dabei die gesamte webseite dabei neu zu laden?

mfg

Nightflyer · 13-05-2010, 18:56

irgendwo wird ja die Funktion jsonFlickrFeed(o) aufgerufen, da musst du nun ein window.setInterval machen

option · 13-05-2010, 19:49

hi!

Zitat:

irgendwo wird ja die Funktion jsonFlickrFeed(o) aufgerufen, da musst du nun ein window.setInterval machen

die wird im moment nur 1 mal aufgerufen wenn die webseite geladen wird - oder wie meinst du das irgendwo?

hab es jetzt so:

Code:

<html>
<head>

<script type="text/javascript">
function jsonFlickrFeed(o)
{
    var div = document.getElementById('photoBucket');
    var i = 0;
    while(o.items[i])
    {
        div.innerHTML += '<img src="' + o.items[i].media.m + '" alt="' + o.items[i].title +'">';
        i++;

window.setInterval("jsonFlickrFeed(o)", 1000);
    }
}
</script>

</head>
<body>

<div id="photoBucket">
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=28203925@N08&lang=en-us&format=json" type="text/javascript"></script>
</div>

</body>
</html>

es wird aber kein reload ausgelöst! ist die zeile window.setInterval("jsonFlickrFeed(o)", 1000); richtig so?

mfg

_geo_ · 13-05-2010, 20:04

Was isn das: Ein setInterval in einer while schleife, die in der funktion ist, die vom setInterval aufgerufen werden soll

.

versuchs mal so

Code:

function jsonFlickrFeed(o)
{
    var div = document.getElementById('photoBucket');
    var i = 0;
    while(o.items[i])
    {
        div.innerHTML += '<img src="' + o.items[i].media.m + '" alt="' + o.items[i].title +'">';
        i++;
    }
}

window.setInterval("jsonFlickrFeed("+o+")", 1000);

option · 13-05-2010, 20:57

hab vorher noch nicht wirklich was mit JavaScript gemacht.

ich dein code gerade online getestet - funktioniert aber leider auch nicht.

Nightflyer · 13-05-2010, 21:26

nach

var div = document.getElementById('photoBucket');

muss noch ein

div.innerHTML = '';

rein damit der Container geleert wird. Des weiteren muss der Feed natürlich auch jedes Mal andere Bilder liefern damit eine Aktualisierung überhaupt Sinn macht

**thomas_E** · 14-05-2010, 00:47

is etwas umfangreicher geworden, weil ajax klappt hier nicht

PHP-Code:

  <html>

<head>

<script type="text/javascript">

    var flickrPhotoBucket;

    var flickrScript;

    

    function jsonFlickrFeed(data)

    {

        if(!flickrPhotoBucket){ flickrPhotoBucket = document.getElementById('photoBucket'); }

        flickrPhotoBucket.innerHTML = "";

        flickrPhotoBucket.data = data;

        

        var i, item, img;

        for(i in data.items){

            item = data.items[i];

            item.tags = item.tags? item.tags.split(' '): [];    //nur cleanup

            

            img = document.createElement('img');

            img.src = item.media.m;

            img.title = img.alt = item.title;

            

            img.flickrData = item;

            

            flickrPhotoBucket.appendChild(img);

        }

    }

 
    function loadFlickrFeed(){

        if(!document.head){ document.head = document.getElementsByTagName('head')[0]; }

        

        var counter = 0;

        if(flickrScript){

            counter = flickrScript.counter;

            document.head.removeChild(flickrScript);

        }

        

        flickrScript = document.createElement('script');

        flickrScript.type = "text/javascript";

        flickrScript.src = "http://api.flickr.com/services/feeds/photos_public.gne?id=28203925@N08&lang=en-us&format=json";

        

        //counter dient nur zur Info

        flickrScript.counter = ++counter;

        flickrScript.setAttribute('counter', counter);

        

        document.head.appendChild(flickrScript);

    }

</script>

</head>

<body>

    <div id="photoBucket">

        Bilder werden geladen ...

        <script type="text/javascript">

            loadFlickrFeed();

            window.setInterval(loadFlickrFeed, 60000);

        </script>

    </div>

</body>

</html>

noch fragen?

edit: Nightflyer hat recht. Das ganze Lohnt sich nicht wirklich, da sich die Bilder nicht sooooo häufig ändern. zumindest nicht bei diesem Aufruf

CaselPasel · 14-05-2010, 07:02

Hey,
eine sichere und schönere Lösung wäre setTimeout(), da setInterval in älteren Browser anfängt sich zu überschneiden, was in deinem Fall nicht soo schlimm ist. Aber wenn du dazu einen AJAX Poll nutzt wird es probleme geben, da sich die Requests irgendwann gegenseitig im wege stehen.

PHP-Code:

  <html>

<head>

<script type="text/javascript">

    var flickrPhotoBucket;

    var flickrScript;

    

    function jsonFlickrFeed(data)

    {

        if(!flickrPhotoBucket){ flickrPhotoBucket = document.getElementById('photoBucket'); }

        flickrPhotoBucket.innerHTML = "";

        flickrPhotoBucket.data = data;

        

        var i, item, img;

        for(i in data.items){

            item = data.items[i];

            item.tags = item.tags? item.tags.split(' '): [];    //nur cleanup

            

            img = document.createElement('img');

            img.src = item.media.m;

            img.title = img.alt = item.title;

            

            img.flickrData = item;

            

            flickrPhotoBucket.appendChild(img);

        }

    }

 
    function loadFlickrFeed(){

        if(!document.head){ document.head = document.getElementsByTagName('head')[0]; }

        

        var counter = 0;

        if(flickrScript){

            counter = flickrScript.counter;

            document.head.removeChild(flickrScript);

        }

        

        flickrScript = document.createElement('script');

        flickrScript.type = "text/javascript";

        flickrScript.src = "http://api.flickr.com/services/feeds/photos_public.gne?id=28203925@N08&lang=en-us&format=json";

        

        //counter dient nur zur Info

        flickrScript.counter = ++counter;

        flickrScript.setAttribute('counter', counter);

        

        document.head.appendChild(flickrScript);

 
        window.setTimeout("loadFlickrFeed",60000);

    }

</script>

</head>

<body onload="loadFlickrFeed();">

    <div id="photoBucket">

        Bilder werden geladen ...

    </div>

</body>

</html>

Mit freundlichen Grüßen

Cas

option · 14-05-2010, 12:53

hi

Zitat:

Zitat von Nightflyer

nach

var div = document.getElementById('photoBucket');

muss noch ein

div.innerHTML = '';

so sollte es dann also funktionieren?

Code:

function jsonFlickrFeed(o)
{
    var div = document.getElementById('photoBucket');
div.innerHTML = '';
    var i = 0;
    while(o.items[i])
    {
        div.innerHTML += '<img src="' + o.items[i].media.m + '" alt="' + o.items[i].title +'">';
        i++;
    }
}

window.setInterval("jsonFlickrFeed("+o+")", 1000);

bei mir geht es aber leider nicht! habs im FIREFOX und im IE getestet.
mfg

Nightflyer · 14-05-2010, 13:14

warum ignorierst du die Beiträge von CaselPascal und Thomas_E? Die haben schon geschrieben dass der Zugriff auf die Datein nicht so simpel über die Schlaufe funktioniert.

option · 14-05-2010, 13:23

weil ich gedacht habe das deine version auch funktioniert! da die um einiges kürzer ist wollte ich die halt nehmen.

also geht das von dir gar nicht? dann werde ich natürlich sehr gerne die anderen beiden probieren.

grüße an alle

Nightflyer · 14-05-2010, 13:30

Beine Antwort bezog sich halt nur auf den Aufruf der Funktion. Ob und wie die Funktion dann auf die Elemente zugreift hab ich nicht geprüft.

option · 14-05-2010, 13:37

das kann man ja nicht wissen.
werd mal die anderen testen.

13-05-2010, 18:56	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	irgendwo wird ja die Funktion jsonFlickrFeed(o) aufgerufen, da musst du nun ein window.setInterval machen __________________ (\__/) (='.'=) (")_(")

13-05-2010, 20:04	#4 (permalink)
_geo_ ~~~~~~~~~~~~ Registriert seit: May 2002 Ort: AUSTRIA (OÖ) Beiträge: 3.298	Was isn das: Ein setInterval in einer while schleife, die in der funktion ist, die vom setInterval aufgerufen werden soll . versuchs mal so Code: function jsonFlickrFeed(o) { var div = document.getElementById('photoBucket'); var i = 0; while(o.items[i]) { div.innerHTML += '<img src="' + o.items[i].media.m + '" alt="' + o.items[i].title +'">'; i++; } } window.setInterval("jsonFlickrFeed("+o+")", 1000); __________________ --- :P --- Blog Bei unerwünschten Nebenwirkungen zerreißen Sie die Packungsbeilage oder erschlagen ihren Arzt oder Apotheker

13-05-2010, 20:57	#5 (permalink)
option Neuer User Registriert seit: Aug 2006 Beiträge: 357	hab vorher noch nicht wirklich was mit JavaScript gemacht. ich dein code gerade online getestet - funktioniert aber leider auch nicht. Geändert von option (13-05-2010 um 21:01 Uhr)

13-05-2010, 21:26	#6 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	nach var div = document.getElementById('photoBucket'); muss noch ein div.innerHTML = ''; rein damit der Container geleert wird. Des weiteren muss der Feed natürlich auch jedes Mal andere Bilder liefern damit eine Aktualisierung überhaupt Sinn macht __________________ (\__/) (='.'=) (")_(") Geändert von Nightflyer (13-05-2010 um 21:29 Uhr)

14-05-2010, 00:47	#7 (permalink)
thomas_E Keine Panik Registriert seit: Apr 2010 Ort: Düsseldorf (im ernst) Beiträge: 1.868	is etwas umfangreicher geworden, weil ajax klappt hier nicht PHP-Code: <html> <head> <script type="text/javascript"> var flickrPhotoBucket; var flickrScript; function jsonFlickrFeed(data) { if(!flickrPhotoBucket){ flickrPhotoBucket = document.getElementById('photoBucket'); } flickrPhotoBucket.innerHTML = ""; flickrPhotoBucket.data = data; var i, item, img; for(i in data.items){ item = data.items[i]; item.tags = item.tags? item.tags.split(' '): []; //nur cleanup img = document.createElement('img'); img.src = item.media.m; img.title = img.alt = item.title; img.flickrData = item; flickrPhotoBucket.appendChild(img); } } function loadFlickrFeed(){ if(!document.head){ document.head = document.getElementsByTagName('head')[0]; } var counter = 0; if(flickrScript){ counter = flickrScript.counter; document.head.removeChild(flickrScript); } flickrScript = document.createElement('script'); flickrScript.type = "text/javascript"; flickrScript.src = "http://api.flickr.com/services/feeds/photos_public.gne?id=28203925@N08&lang=en-us&format=json"; //counter dient nur zur Info flickrScript.counter = ++counter; flickrScript.setAttribute('counter', counter); document.head.appendChild(flickrScript); } </script> </head> <body> <div id="photoBucket"> Bilder werden geladen ... <script type="text/javascript"> loadFlickrFeed(); window.setInterval(loadFlickrFeed, 60000); </script> </div> </body> </html> noch fragen? edit: Nightflyer hat recht. Das ganze Lohnt sich nicht wirklich, da sich die Bilder nicht sooooo häufig ändern. zumindest nicht bei diesem Aufruf __________________ greetz Thomas plz RTFM & Coding Conventions Geändert von thomas_E (14-05-2010 um 00:49 Uhr)

14-05-2010, 07:02	#8 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, eine sichere und schönere Lösung wäre setTimeout(), da setInterval in älteren Browser anfängt sich zu überschneiden, was in deinem Fall nicht soo schlimm ist. Aber wenn du dazu einen AJAX Poll nutzt wird es probleme geben, da sich die Requests irgendwann gegenseitig im wege stehen. PHP-Code: <html> <head> <script type="text/javascript"> var flickrPhotoBucket; var flickrScript; function jsonFlickrFeed(data) { if(!flickrPhotoBucket){ flickrPhotoBucket = document.getElementById('photoBucket'); } flickrPhotoBucket.innerHTML = ""; flickrPhotoBucket.data = data; var i, item, img; for(i in data.items){ item = data.items[i]; item.tags = item.tags? item.tags.split(' '): []; //nur cleanup img = document.createElement('img'); img.src = item.media.m; img.title = img.alt = item.title; img.flickrData = item; flickrPhotoBucket.appendChild(img); } } function loadFlickrFeed(){ if(!document.head){ document.head = document.getElementsByTagName('head')[0]; } var counter = 0; if(flickrScript){ counter = flickrScript.counter; document.head.removeChild(flickrScript); } flickrScript = document.createElement('script'); flickrScript.type = "text/javascript"; flickrScript.src = "http://api.flickr.com/services/feeds/photos_public.gne?id=28203925@N08&lang=en-us&format=json"; //counter dient nur zur Info flickrScript.counter = ++counter; flickrScript.setAttribute('counter', counter); document.head.appendChild(flickrScript); window.setTimeout("loadFlickrFeed",60000); } </script> </head> <body onload="loadFlickrFeed();"> <div id="photoBucket"> Bilder werden geladen ... </div> </body> </html> Mit freundlichen Grüßen Cas

14-05-2010, 13:14	#10 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	warum ignorierst du die Beiträge von CaselPascal und Thomas_E? Die haben schon geschrieben dass der Zugriff auf die Datein nicht so simpel über die Schlaufe funktioniert. __________________ (\__/) (='.'=) (")_(")

14-05-2010, 13:23	#11 (permalink)
option Neuer User Registriert seit: Aug 2006 Beiträge: 357	weil ich gedacht habe das deine version auch funktioniert! da die um einiges kürzer ist wollte ich die halt nehmen. also geht das von dir gar nicht? dann werde ich natürlich sehr gerne die anderen beiden probieren. grüße an alle

14-05-2010, 13:30	#12 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Beine Antwort bezog sich halt nur auf den Aufruf der Funktion. Ob und wie die Funktion dann auf die Elemente zugreift hab ich nicht geprüft. __________________ (\__/) (='.'=) (")_(")

14-05-2010, 13:37	#13 (permalink)
option Neuer User Registriert seit: Aug 2006 Beiträge: 357	das kann man ja nicht wissen. werd mal die anderen testen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Webcam: alle X Sekunden Bild neu laden	Noir0x	Flash Einsteiger	13	30-10-2006 20:12
Bild alle 5 Sekunden neu laden...	fehler798	Flash MX	7	13-08-2006 09:41
Flash soll alle 30 Sekunden Datei neu laden	palvoelgyi	Flash MX 2004	1	28-08-2005 20:48
Text alle X Sekunden von Internetseite laden?	[cyber]	Flash MX	2	20-05-2003 01:15
Alle 3 Sekunden : php-skript laden	icf	Flash und Datenbanken	3	29-07-2002 08:06