صورة فدين بعد تحميلها
سؤال
أحاول جعل الصورة يتم تحميلها في Div بتأثير Fadein. المشكلة هي أنني لا أعرف كيفية تجنب التحميل والتلاشي في نفس الوقت. أريد تحميل الصورة وبعد تحميلها تمامًا ، يجب أن تتلاشى.
http://www.izrada-weba.com/vedranmarketic
هذه هي إبهام الصورة:
<div id="thumbs">
<a href="#" class="slika_thumb" id="1"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="2"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="3"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a> </div>
</div>
هذه حاوية حيث يجب تحميل الصورة:
<div id="desna_kolona">
<div id="slika"><img src="slike/c6.jpg" /></div>
</div>
وهذا ملف jQuery:
$(document).ready(function(){
$('.slika_thumb').click(function() {
var id = $(this).attr("id");
$('#slika').hide();
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
$('#slika').html(data);
$('#slika').fadeIn();
}
});
});
});
حاولت استخدام complete
أقل success
ولكن لا تزال نفس النتيجة. اي نصيحه؟
المحلول
ربما حاول ربط معالج onload بأي صور داخل البيانات التي يتم تحميلها عبر Ajax.
$(document).ready(function(){
$('.slika_thumb').click(function() {
var id = $(this).attr("id");
$('#slika').hide();
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
$('#slika').html(data);
$('#slika img').bind("load", function() {
$('#slika').fadeIn();
});
}
});
});
});
نصائح أخرى
لديك الصورة مخفية لتبدأ بها ، كما ينبغي. ما أود فعله هو إضافة معالج حدث تحميل إلى الصورة ، ثم قم بتشغيل Ajax لتعيين HTML. في معالج الأحداث ، تلاشى الصورة. سيكون من الأسهل إذا استبدلت فقط مصدر الصورة الموجودة منذ ذلك الحين يمكنك إضافة معالج التحميل إليها - لن يعمل على DIV.
$(document).ready(function(){
$('#slika').find('img').load( function() {
$(this).fadeIn();
});
$('.slika_thumb').click(function() {
var id = $(this).attr("id");
$('#slika').hide().find('img').hide();
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
var src = $(data).find('img').attr('src');
$('#slika').show().find('img').attr('src',src);
}
});
});
});
تحميل الصور باستخدام كائن الصورة. يطلق النار load
الحدث عند تنزيل الصورة. لذلك تضع الصورة في #slika
عندما يتم تنزيله بنسبة 100 ٪ واستخدامه jQuery.fadeIn()
.
تحتاج إلى استخدام وظيفة رد الاتصال في حدث .html.
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
$('#slika').html(data, function() {
$('#slika').fadeIn();
});
});
});
تحرير: قد لا يعمل هذا في الواقع بسبب .html كونه عملية متزامنة. هل تقصد load () بدلاً من ذلك؟
يجب عليك إصدار طلب AJAX لتلك الصورة ، انتظر حتى يتم تحميلها بالكامل من خلال الاستماع إلى حدث النجاح. سيساعدك هذا على إدخال الصورة في ذاكرة التخزين المؤقت للمتصفح. ثم يمكنك أن تفعل ذلك في طريقك. سيتم تحميل الصورة على الفور بعد هذا.