Custom Missing Images Using jQuery

مشكلة الصور المفقودة او الغير موجودة على صفحات المواقع هي مشكلة مملة جداً، فكم عدد المواقع التي دخلت عليهم وانتظرت ظهور الصور لفترات طويلة وفي النهاية تكتشف ان الصورة غير موجودة، او اذا كنت من مستخدمي الفايرفوكس فربما تبحث هنا وهناك عن تلك الصورة التي يشير إليها الكاتب والتي لن تجدها و لن تجد اي شيء يدل علي مكانها اذا كان وسم الصورة لا يحتوي علي الخاصية alt لان الفايرفوكس لا يظهر الصور الغير موجودة والتي لا تحتوي علي alt بشكل تلقائي.

الـ jQuery يمكنها حل هذه المشكلة بكل سهولة، ففي هذه التدوينه سوف اخبرك كيف يمكنك استبدال الصور المفقودة بصورة اخرى تُخبر الزائر بأنة كان من المفترض ظهور صورة هنا ولكن لسوء الحظ الصورة اصبحت غير موجودة ولا يمكن عرضها!

• مثال
• تحميل

طريقة الاستخدام

كل ما عليك فعلة هو ادراج كود الجافا اسكربت التالي بصفحات موقعك مع تغيير الصورة البديلة بالصورة التي تفضلها.

JavaScript

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
            'src': 'http://dl.dropbox.com/u/3731265/public_html/jQuery/missing-images/missing-image.gif',
            'alt': 'عفواً، هذة الصورة غير موجودة!',
            'title': 'عفواً، هذة الصورة غير موجودة!',
            'class': 'missing-images'
        });
    });
});
</script>

يمكنك الاكتفاء بكود الـ JavaScript السابق او يمكنك اضافة المزيد من التنسيقات على الصورة المفقودة باستخدام الـ Css كالتالي:

Css

.missing-images {
    border: 1px solid #dcdace;
    padding: 1px;
}

هل لديك المزيد من الحلول والأفكار بخصوص الصور المفقودة والـ jQuery؟ اتمنى ان لا تبخل بها علينا حتى ولو كانت مجرد فكرة :)