javascript كيف يمكنني معرفة متى تم تحميل صورة خلفية كس؟ هل تم إطلاق حدث؟




jquery css (3)

لا تعيين الخلفية في كس، ولكن تحميل الصورة إلى علامة إمغ التي تم إنشاؤها باستخدام جافا سكريبت (أو أفضل، مسج). مرة واحدة تحميلها، فإنه سيتم اطلاق النار الحدث الحمل. عند إطلاق هذا الحدث، تطبيق الخاصية نمط إلى ديف الخاص بك

https://code.i-harness.com

لدي القطعة الشريط الجانبي الذي يحتوي على خلفية الصورة.

أكثر من هذا هو نموذج إدخال البحث. لا أريد إدخال الإدخال قبل تحميل الصورة.

هل هناك طريقة لإرفاق معالج حدث load إلى صور خلفية كس مثل عناصر إمغ / الكائنات العادية؟

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


يمكنك تحميل نفس الصورة باستخدام دوم / صورة مخفية وربط الحدث load على ذلك. التخزين المؤقت للمتصفح يجب أن تأخذ الرعاية من عدم تحميل الصورة مرتين، وإذا تم تحميل الصورة بالفعل يجب أن الحدث النار على الفور ... لم تختبر، صعبة.


في الكروم، وذلك باستخدام .ready () من مسج يبدو للعمل بالنسبة لي. وهنا بلدي كمان:

http://jsfiddle.net/pWjBM/5/

الصورة هي مجرد عشوائية واحدة اخترت هذا هو معقول إلى حد كبير - في الواقع يستغرق وقتا طويلا جدا لتحميل في بعض الاختبارات بلدي، لذلك قد يكون من المفيد استبدال مع شيء أصغر قليلا. ولكن النتيجة النهائية هي ما تريد أعتقد: يستغرق بعض الوقت لتحميل، وبمجرد تحميله التنبيه ثم يعرض مربع النص (#txt). يبدو للعمل في فايرفوكس أيضا؛ غير متأكد من المتصفحات الأخرى.

إديت: هاه، يبدو أنه يعمل في كروم و فيريفوكس و سفاري. لا يعمل في IE8. لذلك ... يعمل في جميع المتصفحات الحقيقية :)

EDIT2: بعد الكثير من تافه، مزيج من أليساندرو وحل بلدي يبدو للعمل. يمكنني استخدام .ready () على إمغ مخفي للكشف عند تحميل الصورة فعلا، ثم تحميله في الخلفية كس.

http://jsfiddle.net/pWjBM/41/

HTML:

<div id="testdiv">
    <input type="text" id="txt" style="display:none;" />
</div>
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" />

جافا سكريبت:

$(function() {
    $('#dummy').ready(function() { 
        alert('loaded');
        $('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)');
        $('#txt').show(1000);
    });
 });

CSS:

#testdiv {
    background:#aaaaaa none no-repeat right top;
    width: 400px;
    height: 400px;
}

#txt{
    margin-left: 180px;
    margin-top: 140px;
}

ملاحظة: هناك تعليق أدناه حول هذا لا يعمل لأنه يمكنك تغيير عنوان ورل من الصورة وأنه لا يزال يطلق الحدث تحميلها. هذا هو في الواقع تعمل تماما إلى حد كبير كما كنت أتوقع بالنظر إلى التعليمات البرمجية الحالية - فإنه لا تحقق ما إذا كان عنوان ورل الذي تشير إليه ل "صورة" الخاص بك هو صحيح وحقا صورة، كل ما يفعله هو حريق حدث عندما إمغ مستعدة وتغيير الخلفية. الافتراض في التعليمات البرمجية هو أن عنوان ورل يشير إلى صورة صالحة، وأعتقد أن أي حاجة إلى مزيد من التحقق من الخطأ ليست في حاجة حقا نظرا للسؤال.





background-image