除非调整浏览器大小，缩放或打开开发工具，否则取消注释的img不会显示

Question

我使用取消注释方法来延迟加载我的图像。我有自己的理由并且它运行良好，除了我需要调整浏览器，缩放或开放开发工具的大小以使它们显示出来。我认为当我这样做时，元素会刷新。有没有办法通过javascript或任何方式模拟3个动作中的任何一个来使我的.container div中的图像刷新？

所以这是Jquery即时使用：

(function($) {
    $.fn.uncomment = function(recurse) {
        $(this).contents().each(function() {
            if ( recurse && this.hasChildNodes() ) {
                $(this).uncomment(recurse);
            } else if ( this.nodeType == 8 ) {
                var e = $('<span>' + this.nodeValue + '</span>');
                $(this).replaceWith(e.contents());
            }
        });
    };
})(jQuery);

然后点击图片应该开始出现，但只有在稍微调整窗口大小时才会显示：

$('button').click(function(e) {
    e.preventDefault();

    $('#music').uncomment(/* recurse */ true );

});

Answer 1

尝试将translate添加到内容：

(function($) {
    $.fn.uncomment = function(recurse) {
        $(this).contents().each(function() {
            if ( recurse && this.hasChildNodes() ) {
                $(this).uncomment(recurse);
            } else if ( this.nodeType == 8 ) {
                var e = $('<span>' + this.nodeValue + '</span>');
                $(this).replaceWith(e.contents());
                $(this).css({'translateX' : 0});
            }
        });
    };
})(jQuery);

或在窗口上触发resize事件

(function($) {
    $.fn.uncomment = function(recurse) {
        $(this).contents().each(function() {
            if ( recurse && this.hasChildNodes() ) {
                $(this).uncomment(recurse);
            } else if ( this.nodeType == 8 ) {
                var e = $('<span>' + this.nodeValue + '</span>');
                $(this).replaceWith(e.contents());
            }
            $(window).trigger('resize');
        });
    };
})(jQuery);