如何防止ajax成功显示图像破碎前的图标

How to prevent ajax success showing before image broken icon?

本文关键字：破碎 图标 图像 显示图 何防止 ajax 成功 显示      更新时间：2023-09-26

在成功显示图像破碎图标之前。如何预防或有更好的解决方案这是我的代码

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'
                    })

预加载图像，然后将其添加到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'
})
相关文章：