Show the Success Message before Redirecting the Detail page on Visualforce Page

Requirement:

To show the Success message before Redirecting the Detail page. On Click on Save button show the successful message after that redirect to detail page. 

Solution:

Create the Controller Class

public class ClassName {
// Create a boolean property
    public boolean isChanged{get;set;}
   

   
    public void SaveData(){
       
//Write Save/update Logic
//insert/update list or object
/set the boolean value as a true after list update/insert
isChanged=true;
        ClassName
        
    }

// This method will call after saving the record. and redirect to specify id
    public pagereference redirectToRequiredPage(){
        PageReference pageRef=new PageReference('/' +Recordid);
        return pageRef;
    }
}

Create the visualforce page

<apex:page Controller="ClassName" standardStylesheets="true" sidebar="true" showHeader="true">
<apex:form>
    <apex:outputPanel id='outPanelId'>
        <script>
        function funcOnComp(varA){
            if(varA){
                alert('Record has been successfully updated/Saved');
            }
            redirectToDetailPage();
        }
        </script>
    </apex:outputPanel>
    <apex:actionFunction name="doSave" rerender="outPanelId" action="{!SaveData}" oncomplete="funcOnComp('{!isChanged}'); "/>
    <apex:actionFunction name="redirectToDetailPage" action="{!redirectToRequiredPage}"/>
    <apex:outputPanel layout="block">
        <apex:pageBlock>
            
                <div  style="text-align:center;">   
                    <apex:commandButton onclick="doSave();" 
                                        oncomplete="funcOnComp()" value="Save"/>
                </div>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:outputPanel> 
</apex:form>