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

Uncommented img´s not showing unless resizing browser, zooming or opening dev tools

本文关键字：开发工具 缩放 显示 #180 img 注释 浏览器 调整      更新时间：2023-09-26

我使用了一种取消注释的方法来延迟加载我的图像。我有理由这样做，它运行得很好，除了我需要调整浏览器大小、缩放或打开开发工具才能让它们显示出来。我认为当我这样做的时候，元素会更新。有没有任何方法可以通过javascript模拟这3个操作中的任何一个，或者有任何方法可以刷新我的.conta容器div中的图像？

下面是Jquery im使用的：

(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 );
});

尝试将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);
相关文章：