如何防止Ajax成功顯示在圖像損壞的圖標之前？

Question

成功之前，顯示圖像損壞的圖標。 如何預防或有更好的解決方案-這是我的代碼

var menuName = ['about.jpg', 'concerns.jpg', 'contact.jpg', 'gallery.jpg'];
                    $.ajax({
                        url: htmlContetPage[menuItem],
                        success: function (data) {
                            $('.content_area').html(data);
                            $("img").error(function(){
                                $(this).hide();
                            });
                            $('.wheelSelect').html('<img style="width:100%;overflow:hidden;" src="images/' + menuName[menuItem] + '" />');
                        },
                        dataType: 'html'
                    })

Answer 1

預加載圖像，然后將其添加到html中。

var menuName = ['about.jpg', 'concerns.jpg', 'contact.jpg', 'gallery.jpg'];
$.ajax({
    url: htmlContetPage[menuItem],
    success: function (data) {
        $('.content_area').html(data);
        $("img").error(function(){
            $(this).hide();
        });
        var image = new Image();

        image.onload = function() {
            $('.wheelSelect').html('<img style="width:100%;overflow:hidden;" src="images/' + menuName[menuItem] + '" />');
        };

        image.src = 'images/' + menuName[menuItem];
    },
    dataType: 'html'
})