صورة فدين بعد تحميلها

Question

أحاول جعل الصورة يتم تحميلها في 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 ولكن لا تزال نفس النتيجة. اي نصيحه؟

Answer 1

ربما حاول ربط معالج 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();  
          });
        }
      });    

  });

});

Answer 2

لديك الصورة مخفية لتبدأ بها ، كما ينبغي. ما أود فعله هو إضافة معالج حدث تحميل إلى الصورة ، ثم قم بتشغيل 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);
          }
        });    

    });

});

Answer 3

تحميل الصور باستخدام كائن الصورة. يطلق النار load الحدث عند تنزيل الصورة. لذلك تضع الصورة في #slika عندما يتم تنزيله بنسبة 100 ٪ واستخدامه jQuery.fadeIn().

Answer 4

تحتاج إلى استخدام وظيفة رد الاتصال في حدث .html.

    $.ajax({
      url: 'slike/slika.php?id=' + id,
      success: function(data) {

        $('#slika').html(data, function() {
           $('#slika').fadeIn();
        });
      });
    });  

تحرير: قد لا يعمل هذا في الواقع بسبب .html كونه عملية متزامنة. هل تقصد load () بدلاً من ذلك؟

Answer 5

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