» ثغرات اسكربتات و منتديات » كود جافا سكريبت لاضافة ابعاد الصورة تلقائياً في صفحات موقعك ومنتداك

الاثنين، نوفمبر 05، 2012
10:45 ص
ثغرات اسكربتات و منتديات

كود جافا سكريبت لاضافة ابعاد الصورة تلقائياً في صفحات موقعك ومنتداك


بسم الله الرحمن الرحيم 
السلام عليكم ورحمه الله وبركاته


 كود لاضافة مقاسات لأبعاد الصورة العرض والطول تلقائياً داخل الوسم <img> في HTML المهم لفيت لحد ما لقيته وجربته لقيته شغال

الكود عبارة عن دالة واحدة فقط في Javascript يتم اضافته قبل انتهاء الوسم </head> في الصفحة


رمز php:
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    {
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
ومن ثم تبديل الوسم <body> بهذا الكود لاستدعاء الدالة 

رمز php:

<body onload="addImgAttributes();">

هذا الكود سوف يضيف أبعاد الصورة تلقائياً width & hight

لتكون الصورة 

رمز php:
<img src="http://imghndl.com/images/741127146.jpg" height="293" width="500" />

بدلاً من
رمز php:
 
<img src="http://imghndl.com/images/741127146.jpg" /> 
ما هي فائدة وضع أبعاد على الصورة في كود HTML ؟ image dimension

وجد ضمن معايير Google Speed

المؤشر Specify image dimensions ، عندما يتم الاتصال بصفحة متوسطة العدد من حيث الصور من المتصفح مثلاً فإنه يبدأ في وضع احجام الصور حتى قبل تحميلها وتبعاً لذلك تتغير اجزاء الصفحة حسب اكتمال تحميلها ، إلا اذا كنت تعلم المتصفح مسبقاً بأبعاد الصور فيتم تحميل الصفحة متساوية احجام المربعات وتحمل جميع الصور دون حدوث تغيير في شكل الصفحة أو التصميم . أتمنى تكون وصلت الفكرة.

الآن علينا عمل اختبار بسيط لندرك أهمية الموضوع بشكل اكثر

قم بعمل تقييم لآداء صفحتك عن طريق أحد مواقع تقييم الصفحات مثلاً

GTmetrix | Website Speed and Performance Optimization

ضيف رابط موقعك هيعطيك تقرير عن توافق موقعك مع معايير Page Speed Grade

تمت تجربة صفحة متوسطة باستايل افتراضي وعدد بسيط من الصور والايقونات فكانت النتيجة صفر %



 كيفية اضافة ابعاد الصورة في الستايل بالمنتدى

بالنسبة لمنتديات الجيل الثالث vBulletin 3.6.x

قم بفتح قالب headinclude للتعديل عليه من خيارات القوالب بالاستايل

ابحث عن 
رمز php:

<!-- / CSS Stylesheet -->
أضف اسفله
  
رمز php:

<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    {
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
الآن لكل قالب تريد أن يظهر فيه الكود

مثلاً الصفحة الرئيسية هنقوم بالتعديل على قالب Forumhome

ابحث 
رمز php:

<body>
استبدل بـ :
رمز php:

<body onload="addImgAttributes();">

نفس المثال اذا هنقوم بوضع الكود

صفحة عرض المواضيع = قالب Showthread
صفحة عرض أقسام المنتديات = Forumdisplay
وهكذا

لم اجربه على الجيل الرابع ، وهناك لهذه الخاصية خيار بهاك الفي بي سيو لكن لم ينفع معي وعلى أي حال هذه طريقة يدوية. اذا كان في للاخوة وقت يعمله لنا في منتج او برمجية بسيطة.


  
اتمنى اكون وفقت فى شرح هذا الدرس بطريقة مبسطه ، فان اصبت فمن الله وان أخطأت فمن نفسي والشيطان .
وانتظروني مع المفاجئات القادمه باذن الله راح تعجبكم
 
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

شارك أصدقاءك

لا توجد تعليقات على موضوع " كود جافا سكريبت لاضافة ابعاد الصورة تلقائياً في صفحات موقعك ومنتداك"

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .