معاينة صورة jQuery التي تعمل على روابط الصور المضمنة Ajax؟

Question

هناك العديد من الإضافات الجيدة معاينة صورة jQuery هناك. ومع ذلك ، فإن جميع تلك التي اختبرتها لم تعمل على روابط الصور المضمنة في DOM مع Ajax.

لقد اختبرت استخدام ميزة JQuery Live ، لكنها لا تعمل على عيب.

$('a.preview').live('mouseover', function() {
    $(this).imgPreview({
        imgCSS: {
            //width: '200px'
        },
        preloadImages:      'true',
    });
});

أنا أستخدم هذا: http://www.webresourcesdepot.com/jquery-image-preview-plugin-imgpreview/

المشكلة هي أنه يجب علي استخدام jQuery Live كما تراه أعلاه. ولكن هناك 2 عيوب.

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

2. انها لا مسبقا الصور. إذا قمت بفحص موقع الويب الخاص بهم ، فإنهم يستخدمونه مثل هذا بدلاً من ذلك:

   $ ('A.Preview'). imgpreview ({preloadimages: 'true' ،}) ؛

وهذا من شأنه التحميل المسبق لجميع المعاينات بعد تحميل DOM بالكامل. لكنني غلفت الوظيفة. ولكن حتى لو لم أفعل ، فلا يمكن أن أتسبب في إضافة روابط الصورة هذه مع Ajax بعد تحميل DOM.

أتساءل عما إذا كان شخص ما يعرف عن البرنامج المساعد الذي يمكن أن يفعل نفس الأشياء على العناصر التي يحملها Ajax ، سواء Preview أو التحميل المسبق.

شكرًا.

Answer 1

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

يجب عليك إضافة $('a.preview').imgPreview(...) مباشرة بعد إرفاق الروابط الجديدة (من AJAX) إلى DOM ..

Answer 2

باستخدام نفس البرنامج المساعد ومع Ajax هذا العمل بشكل مثالي:

.
.
.
$.post("ajax/showAlbum.php", { directory: "whatever" },
   function(data) {$('#first').append(data);
$('#first a').imgPreview({
    preloadImages:      'true',
    });
.
.
.