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. }
    6. function loadImage(imgNumber) {
    7. var img = new Image();
    8. //this is the link to profile image of a user. This link is well defined in Facebook API Documentation
    9. img.src = "http://graph.facebook.com/"+friends[imgNumber].id+"/picture";
    10. img.alt = img.title = friends[imgNumber].name;
    11. imgLoaded++;
    12. span();
    13. document.getElementById("pics").appendChild(img);
    14. 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. }
    55. function span() {
    56. var spanTag = document.createElement("span");
    57. spanTag.id = imgLoaded;
    58. document.getElementById("pics").appendChild(span);
    59. }
    60. //load the images one at a time
    61. function loadImage(imgNumber) {
    62. var img = new Image();
    63. //this is the link to profile image of a user. This link is well defined in Facebook API Documentation
    64. img.src = "http://graph.facebook.com/"+friends[imgNumber].id+"/picture";
    65. img.alt = img.title = friends[imgNumber].name;
    66. imgLoaded++;
    67. span();
    68. document.getElementById("pics").appendChild(img);
    69. document.getElementById("count").innerHTML = imgLoaded+" of "+totalToBeLoaded + " images loaded";
    70. if(imgLoaded==totalToBeLoaded) {
    71. document.getElementById("status").innerHTML = "Loaded all friends' profile images...";
    72. }
    73. }
    74. function init() {
    75. document.getElementById("loginBtn").onclick = loginFacebook;
    76. document.getElementById("friendBtn").onclick = getFriends;
    77. }
    78. //calls init function once all the resources are loaded
    79. window.addEventListener("load",init,true);
    80. </script>
    81. </head>
    82. <body>
    83. <div id="fb-root"></div>
    84. <div id="wrapper">
    85. <input class="btn" type="button" id="loginBtn" value="Get Permissions from Facebook" />
    86. <input class="btn" type="button" value="Get Friends" id="friendBtn" />
    87. <!-- the following div will show the status messages during the workflow of application-->
    88. <div id="status"></div>
    89. <!-- shows the images loaded till now-->
    90. <div id="count"></div>
    91. <!-- holds all the profile pics-->
    92. <div id="pics"></div>
    93. <div id="footer"></div>
    94. </div>
    95. </body>
    96. </html>
    Alles anzeigen