Question

常见情况。用户点击缩略图，打开模态，发出ajax请求。在成功回调中，我确实检索了一些信息和html代码，里面有一个图像。之后我想将图像置于模态包装中心。模态换行基本上是一个全屏减去右边宽度为320px的div。我的代码有效，但并非总是......有时候图片没有正确居中。有谁知道问题在哪里？ “.photo-media-part-image”是来自ajax成功回调的一类图像。

检查图像是否已加载

jQuery.fn.isLoaded = function() {
    return this
        .filter("img")
        .filter(function() { return this.complete; }).length > 0;
};

// OPEN STATUS MEDIA MODAL
function openStatusMediaModal(e) {

    $('body').css('overflow','hidden');
    var mediaModal = $('#mediaModal');

    $.ajax({
        success: function(data){
            mediaModal.find('.modal-body').html(data);

            tryMediaModalPictureVerticalAlign(mediaModal);

        },
        error: function(data) {
            ShowFlashMessagesBlockAfterAjax("Error");
        },
        complete: function() {

        }
    });
    return false;
}

function tryMediaModalPictureVerticalAlign(mediaModal) {
    if ($(".photo-media-part-image").isLoaded()) {
        var image = $(".photo-media-part-image");
        var imgHeight = image.height();
        var imgWidth = image.width();
        var wraper = $(window);

        // STOP THE LOADING ANIMATION
        loading('stop');

        // SHOW SMOOTHLY THE PICTURE
        image.animate({
            opacity: 1,
            top: ((wraper.height()-imgHeight)/2)+'px',
            left: ((wraper.width()-320-imgWidth)/2)+'px'
        }, 300, function() {
            // Animation complete.
        });

    } else {
        // try again
        setTimeout(function() {
            tryMediaModalPictureVerticalAlign(mediaModal);
        }, 200);

    }
}

我认为当我关闭图像并再次打开图像时，通常会出现该错误。但并不总是......

Jquery ajax图片已加载

0 个答案: