Image problem

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Image problem

    Guten Abend zusammen,

    ich habe nur eine kleine frage bezüglich JavaScript (natürlich).
    Könnten mir die Experten bitte erklären was an folgendem Code nicht ganz richtig ist? :huh:

    Quellcode

    1. function span() {
    2. var spanTag = document.createElement("span");
    3. spanTag.id = imgLoaded;
    4. document.getElementById("pics").appendChild(span);
    5. }
    7. function loadImage(imgNumber) {
    8. var img = new Image();
    9. //this is the link to profile image of a user. This link is well defined in Facebook API Documentation
    10. img.src = "http://graph.facebook.com/"+friends[imgNumber].id+"/picture";
    11. img.alt = img.title = friends[imgNumber].name;
    12. imgLoaded++;
    13. span();
    14. document.getElementById("pics").appendChild(img);
    15. document.getElementById("count").innerHTML = imgLoaded+" of "+totalToBeLoaded + " images loaded";
    Alles anzeigen


    Vielen Dank schonmal im Vorraus :thumbup:

  • Ach ne moment ich brauche nicht unbedingt ein span eine img.id für jedes bild würde auch gehen...
    hier mal der gesamte code:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html>
    3. <head>
    4. <script src="js/prototype.js" type="text/javascript"></script>
    5. <script src="js/scriptaculous.js?load=dragdrop" type="text/javascript"></script>
    6. <title>Facebook Profile Images Application</title>
    7. <!-- Include the Facebook Javascript API -->
    8. <script src="http://connect.facebook.net/de_DE/all.js"></script>
    9. <!-- Include the normal stylesheet-->
    10. <link href="/pictures/style.css" rel="stylesheet" />
    11. <!-- The whole script for the application -->
    12. <script type="text/javascript">
    13. /*Global variables*/
    14. var loggedIn = false;
    15. var imgLoaded = 0;
    16. var friends = null;
    17. var totalToBeLoaded = 0;
    18. /*Logs the user into Facebook*/
    19. function loginFacebook() {
    20. //initializes the facebook API
    21. FB.init({appId : "264225570289529", status : true,cookie : true,xbfml : true});
    22. document.getElementById("status").innerHTML = "Waiting for Facebook permission";
    23. //opens the Facebook login window for user
    24. FB.login(function(response) {
    25. if (response.session) {
    26. document.getElementById("status").innerHTML = "Logged In";
    27. loggedIn = true;
    28. } else {
    29. document.getElementById("status").innerHTML = "You have not given required permissions";
    30. loggedIn = false;
    31. }
    32. });
    33. //disables the login button after the user has loggedIn
    34. if(loggedIn) {
    35. document.getElementById("loginBtn").disabled = "disabled";
    36. }
    37. }
    38. //gets the list of friends of the logged in person
    39. function getFriends() {
    40. //if the person has not pressed login button
    41. if(!loggedIn) {
    42. loginFacebook();
    43. }
    44. document.getElementById("status").innerHTML = "Now loading your friends' profile images...";
    45. //if the person is loggedIn
    46. if(loggedIn) {
    47. document.getElementById("friendBtn").disabled = "disabled";
    48. FB.api("/me/friends",function(response){
    49. friends = response["data"];
    50. totalToBeLoaded = friends.length;
    51. loadImage(0);
    52. });
    53. }
    54. }
    56. function span() {
    57. var spanTag = document.createElement("span");
    58. spanTag.id = imgLoaded;
    59. document.getElementById("pics").appendChild(span);
    60. }
    61. //load the images one at a time
    62. function loadImage(imgNumber) {
    63. var img = new Image();
    64. //this is the link to profile image of a user. This link is well defined in Facebook API Documentation
    65. img.src = "http://graph.facebook.com/"+friends[imgNumber].id+"/picture";
    66. img.alt = img.title = friends[imgNumber].name;
    67. imgLoaded++;
    68. span();
    69. document.getElementById("pics").appendChild(img);
    70. document.getElementById("count").innerHTML = imgLoaded+" of "+totalToBeLoaded + " images loaded";
    72. if(imgLoaded==totalToBeLoaded) {
    73. document.getElementById("status").innerHTML = "Loaded all friends' profile images...";
    74. }
    75. }
    77. function init() {
    78. document.getElementById("loginBtn").onclick = loginFacebook;
    79. document.getElementById("friendBtn").onclick = getFriends;
    80. }
    81. //calls init function once all the resources are loaded
    82. window.addEventListener("load",init,true);
    83. </script>
    84. </head>
    85. <body>
    86. <div id="fb-root"></div>
    87. <div id="wrapper">
    88. <input class="btn" type="button" id="loginBtn" value="Get Permissions from Facebook" />
    89. <input class="btn" type="button" value="Get Friends" id="friendBtn" />
    90. <!-- the following div will show the status messages during the workflow of application-->
    91. <div id="status"></div>
    92. <!-- shows the images loaded till now-->
    93. <div id="count"></div>
    94. <!-- holds all the profile pics-->
    95. <div id="pics"></div>
    96. <div id="footer"></div>
    97. </div>
    98. </body>
    99. </html>
    Alles anzeigen