Facebook
Twitter
RSS1652
צפיות
צפיות
16
תשובות
תשובות
שינוי גודל תמונה JAVASCRIPT
שלום לכולם,
יש לי דף עם כמה וכמה תמונות.
בניתי פונקציה שמקטינה תמונות ע"מ להקטין את התמונות שבעמוד לגודל מקסימלי שאני מגדיר ובצורה פרופורציונלית.
הפונקציה עובדת מצויין.
שמתי את ההרצה של הפונקציה ב onload של כל תמונה בעמוד, הבעיה שנוצרה היא שהתמונה נטענת בגודל אמיתי (עד שמסיימת לרדת למחשב) ורק אחכ הפונקציה מקטינה את התמונה וזה מכער את פעולת הדף.
חשבתי לטעון את התמונה ב display:none ואז בסוף שינוי הגודל להציג אותה שוב.
משום מה ב FireFox זה עובד מצויין וב IE לא עובד :/
קוד מצורף
תודה מראש לעוזרים!!! 
מקווה שזה יעזור גם לאחרים שמחפשים את הפונקציה הזו
16 תשובות
אוקי
קודם כל, הקוד לא מצורף.
דבר שני, את יכולה ליצור בצד שרת עמוד שיוצג את התמונה בגודל מוקטן בצורה קלה ונוחה:
<img src="resize.asp?pic=pic1.jpg" />
זה כמובן תלוי אם באפשרותך לבצע זאת.
"החיים הם רק הדרך במסע הנפש", בילד 2004-2008 <img src='/images/6.gif'>
http://Www.Torec.Net * http://Www.Torec.In
הקובץ
לא יודע למה הוא לא נכנס מקודם אבל הנה הוא.
לא אמרתי אבל זה עמוד עם לולאה בצד שרת שרצה על תמונות משתנות אלו לא תמונות קבועות אלא נטענות מ DB
הקובץ
תשובה
1. למה לשמור קוד בינארי של תמונות במסד נתונים ולא כקובץ פיזי בשרת?
2. בכל מצב התמונה תיטען בצד לקוח בגודלה המקורי ואז תוקטן ע"י הפונקציה.
3. לא יודע אם ידוע לך זאת, אבל גם אם הקטנת את התמונה בצד לקוח והיא שוקלת 100KB, התעבורה הנדרשת לתמונה היא 100KB גם אם הקטנת אותה בצד לקוח – פיזית היא עדיין 100KB.
"החיים הם רק הדרך במסע הנפש", בילד 2004-2008 <img src='/images/6.gif'>
http://Www.Torec.Net * http://Www.Torec.In
נכון..
1. לא שומר את הקובץ בתוך ה DB אלא רק את הלינק והתמונות כמובן שמורות כ JPG
2-3. נכון ברור לי שהיא עדיין תורד בכל הגודל המלא שלה ורק אז תוקטן, את זה אני יודע, מה שאני רוצה זה שבזמן ההורדה היא לא תוצג אלא רק אחרי שההורדה ושינוי הגודל יסתיימו
מישהו יודע?
BuildHome , לא הבנתי את מה שכתבת בהתחלה לגבי הדף בשרת שיציג את התמונה מוקטנת אשמח להסבר
ותודה רבה על העזרה!
אולי שיכבה עליונה
אולי תמקם מיד עם עליית העמוד שיכבה לבנה ריקה מעל התמונה, ואז אחרי סיום שינוי הגודל – תעלים את השיכבה.
אני חושב שגם פונקציית preload יכולה לעזור כאן, לטעון את התמונה לתוך אובייקט ב-JS, ואחרי שהיא נטענת לבצע שינוי גודל ורק אז לזרוק אותה לעמוד עם innerHTML או משהו.
אלי ענתבי
entry interactive
http://www.entry.co.il
…
אלי תודה רבה על התשובה!
לגבי האפשרות הראשונה, חשבתי באמת אם להגדיר את התמונה כאילו "מתחת לאתר עם z-index אבל זה עדיין לא שינה את המצב
העניין שכשהאתר עולה הוא מתרחב וקטן בכל תמונה. יש תפריט למעלה ועמוד מתחתיו התמונות גורמות שהחלק האמצעי של האתר יצא מהפרופורציות בגלל התמונות הגדולות ואז אחרי ההקטנה זה נכנס חזרה לפרופורציות (המבנה הוא טבלאי).
לגבי preload , אם אני אטען כך נניח 10 תמונות בעמוד.. העמוד יטען רק אחרי שהוא מסיים להוריד את התמונות או שאפשר שכל תמונה שמסתיים התהליך שלה פשוט תוצג בעמוד?
אז תיתן להם גודל התחלתי קטן
תן לתמונות רוחב וגובה של 1 פיקסל, ורק כשהם מסתיימות להיטען תיתן להם גודל אמיתי
אלי ענתבי
entry interactive
http://www.entry.co.il
אבל זה בעייתי
תראה בבקשה את הקוד שצירפתי בהודעות הקודמות.
אם אני מגדיר את התמונה עם
height="1px" ו width="1px" אז כשהפונקציה הזו רצה על התמונה היא תקרא את הגודל הזה כגודל המקור של התמונה וממנו תנסה להקטין אותה.
יש איזושהי דרך לשמור עוד Attribute לתמונות של הגודל המקורי שלהן אבל בכל זאת להגדיר 1 ו 1 לגובה והרוחב?
אתה יכול לנסות visibility:hidden
אין טעם לעשות מניפולציות כגון לשים משטח לבן על התמונה ולהעלים אותו אחרי שהיא עלתה אלה רק למצוא את הסיבה מדוע IE לא מעלים את התמונה.
תנסה:
display:none; visibility:hidden;
כבר ניסיתי את שניהם,אנסח את הבעיה..
העניין הוא כך, ההקטנה של התמונות עובדת, ההקטנה לצערי מתבצעת באירוע onload מה שאומר שרק אחרי שהתמונה סיימה לרדת אל המחשב היא תוקטן. מה שקורה במצב הזה הוא שהתמונה מורדת ומוצגת בגודל אמיתי ואז קטנה כמו שצריך, בזמן שהיא מוצגת בגודל מלא היא מזיזה ומשגעת את כל האתר (כמובן שאחכ זה מסתדר) וזה נראה ממש לא טוב.
אז ככה.. display:none ה – פתרון אבל לצערי עובד רק ב FF ולא ב IE 🙁 מה שכן עושה את הפעולה בדיוק כמו שצריכה להיעשות! .
visibility:hidden לא פותר את הבעיה כי הוא רק מסתיר אותה אבל עדיין תופס את המקום של התמונה המלאה בעמוד אז זה לא פותר את הבעיה.
חקרתי עוד יותר לעומק הבנתי שכנראה מדובר בבאג באקספלורר וזה קורה מכיוון שבסטטוס display:none הוא בכלל לא מזהה גודל של התמונה כי היא לא נטענת לעמוד ולכן הגודל שלה מבחינתו הוא 0.
אז בוא נראה מי התותח שיצליח לפתור את זה בלי יותר מדי סיבוכים אני הפכתי המון פורומים ברשת וגם המון המון בגוגל ועדיין לא מצאתי פתרון לזה.
תודה מראש! ותודה גם לכל מי שעד כה עזר
עוד רעיון
שים את התמונה בתוך אובייקט DIV שמוגדר לו רוחב וגובה 1 פיקסלים, ויש לו הגדרת overflow:hidden.
אחרי הטעינה ואחרי שקבעת לתמונה את הגודל שאתה רוצה – תהפוך את ה-overflow ל-auto.
אלי ענתבי
entry interactive
http://www.entry.co.il
(הבעיה נפתרה)
יווו אלי…
תודה רבה! דרך חשיבה מעניינת מאד תודה על העזרה! 
תודה רבה גברררר
עובד מצויין סוף סוף יש פתרון לבעיה המציקה הזו
אגב ה overflow ..
לאחר הטעינה לא עבד ה overflow="auto"
אבל כן עבד overflow="visible"
רק שיהיה כאן למקרה הצורך ופתרון מדוייק עד הסוף
שוב תודה
2 אופציות שעשיתי בעבר
1. צד שרת: הכי יעיל באמצעות רכיב עיבוד תמונה.
2. צד לקוח לטעון את התמונה אל תוך אלמנט IMG נסתר. לקרוא את הרזולוצייה. לבצע עיבוד של הגודל והגובה במשתנים נפרדים מהאלמנט. ואז להעביר את זה לאלמנט IMG אחר לתצוגה שאתה קובע לו רזולוצייה.