טעינת תמונות באמצעות jQuery

 

הצגת אנימצית טעינה בזמן טעינת תמונות הפכה לדבר מקובל, אנחנו רואים את זה בפייסבוק, באתרים עמוסים בתמונות וסתם באתרים שהחליטו להשקיע קצת יותר. האמת, זה ממש פשוט- אז למה לא? במדריך זה אני אסביר לכם איך תוכלו להציג אנימציית טעינה בזמן שהתמונות באתרכם נטענות וכאשר התמונה טעונה היא תוצג בפייד אין. בנוסף אני אצ'פר אתכם בשני לינקים לאתרים מהם תוכלו לבחור מבין מבחר עצום של אנימציות טעינה.

אם אתם שואלים את עצמכם למה בכלל צריך את זה, התשובה היא לא צריכים. הסיבה שמשתמשים באנימציית טעינה זה על מנת לתת לגולש באתר אינדקציה שהוא מחכה למשהו שיטען ובנוסף, לדעתי, זה מוסיף נופח מקצועי לאתר שלכם.

ונעבור לקוד:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
   <head>
     ...
    <style type="text/css" media="screen">
    <!--
       
       DIV#loader {
           border: 1px solid #ccc;
           width: 600px;
           height: 450px;
           overflow: hidden;
       }

       DIV#loader.loading {
           background: url(images/spinner.gif) no-repeat center center;
       }
   -->
    </style>
</head>
<body>
...        
    <div id="loader" class="loading">

    </div>
...
</body>
</html>

מה שעשיתי כאן הוא ליצור DIV עם הקלאס loading וה-ID שלו הוא loader, הוספתי קצת CSS כדיי ליפיף את הDIV אבל מה שחשוב זה שהוספתי לקלאס רקע עם תמונת הטעינה ממורכזת:

1
2
3
DIV#loader.loading {
            background: url(images/spinner.gif) no-repeat center center;
        }

כאשר התמונה תטען אנחנו נמחוק את הקלאס מה-DIV וכך תמונת הטעינה תעלם.

כעת נעבור לקוד ה-jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
        <script type="text/javascript">
        <!--
     $(function () {
        var img = new Image();
        $(img).load(function () {
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // פונקציה שמטפלת במקרה בה התמונה לא יכולה לעלות
        }).attr('src', 'http://htm.co.il/lab/loadImage/images/n1366720127_335885_7404287.jpg');
    });
   
    //-->
    </script>

בשורה הראשונה אנחנו טוענים את ספריית ה-jQuery. בשורה מס' 5 אנחנו יוצרים אלמנט של תמונה (ריק), בשורה 12 אנחנו מגדירים את מאפיין ה-src של התמונה (לינק לקובץ אותו הוא ינסה לטעון).
מה שנותר לנו זה להוסיף שתי פונקציות, אחת לכאשר התמונה נטענת (שורות 6-9) ואחת לכאשר יש בעיה בטעינת התמונה (10-11).
בפונקציה הראשונה, load, מה שקורה הוא שדבר ראשון מעלימים את התמונה (על מנת ליצור אפקט הופעה אח"כ), מוחקים את קלאס הטעינה מה-DIV ומוסיפים ל-DIV את התמונה (שורה 8), לאחר מכן יוצרים אפקט של פייד אין לתמונה וכך התמונה מופיעה בצורה נעימה.
את הפונקציה השנייה לא מימשתי אבל אתם מוזמנים לממש אותה כרצונכם.

וזה הקוד המלא של הדף:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
   <head>
        ...
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
        <script type="text/javascript">
        <!--
   $(function () {
       var img = new Image();
       $(img).load(function () {
           $(this).hide();
           $('#loader').removeClass('loading').append(this);
           $(this).fadeIn();
       }).error(function () {
           // פונקציה שמטפלת במקרה בה התמונה לא יכולה לעלות
       }).attr('src', 'http://htm.co.il/lab/loadImage/images/n1366720127_335885_7404287.jpg');
   });
   
   //-->
    </script>
    <style type="text/css" media="screen">
    <!--
       
       DIV#loader {
           border: 1px solid #ccc;
           width: 600px;
           height: 450px;
           overflow: hidden;
       }

       DIV#loader.loading {
           background: url(images/spinner.gif) no-repeat center center;
       }
   -->
    </style>
</head>
<body>
    ...
    <div id="loader" class="loading">

    </div>
    ...
</body>
</html>

ועכשיו כפי שהבטחתי שני אתרים להורדת אנימציית טעינה (קבצי gif):

שני האתרים הללו מציעים הורדה של תמונות gif מונפשות. אפשר להגדיר מאוד בפשטות את צבע הרקע של התמונה ואת צבע האנימציה להתאמה מושלמת לאתרכם. את התמונה הרצויה לכם תוסיפו כתמונת רקע ל-DIV הטעינה (בהגדרת הקלאס שלו).

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון