como retrasar cierta funcion ?

[rikimm]

tengo una pequeña duda se puede hacer lo siguiente:

tengo que cargar en 4 div cierto numeros de elementos que son 4 imagenes en la cual todo eso funciona por medio de un $.hover() todos los elementos se cargan bien, pero mi pidieron algo en especial que se hiciera todo el procedimiento despues de 2 segundos de que esta el cursor este en el elemento para que cargue las 4 imagenes , como puedo retrasar toda la funcion que hago .

dejo parte de mi codigo

Código jquery:

$("#link-videos").hover(function(){
 
            tipo=$("#caos-grid").attr("class");
            if(tipo != "video"){
                $("#caos-grid").attr("class","video");
                tipo=$("#caos-grid").attr("class");
                cambio_color(tipo);
            }
        });
 
 
function cambio_color(tipo){
        //$("#caos-grid div a").remove()
        $("#caos-grid").fadeOut(1000, function(){
            switch(tipo){
                case "video":
                    tipo_contenido = "video";
                    //sessionStorage.getItem("proyector_video")
                    //if(sessionStorage.getItem("proyector_video"))
                    proyector(tipo_contenido);
                    $("#caos-grid").delay(500).fadeIn(1000);
                    break;
 
                case "foto":
                    tipo_contenido = "foto";
                    proyector(tipo_contenido);
                    $("#caos-grid").delay(500).fadeIn(1000);
                    break;
 
                case "juegos":
                    tipo_contenido = "juego";
                    proyector(tipo_contenido);
                    $(".juegos div a").css("opacity"," 0.6");
                    $("#caos-grid").delay(500).fadeIn(1000);
                    break;
 
                case "actividades":
                    tipo_contenido = "descarga";
                    proyector(tipo_contenido);
                    $(".juegos div a").css("opacity"," 0.6");
                    $("#caos-grid").delay(500).fadeIn(1000);
                    break;
            }
        });
    }  
 
 
function proyector(args_content){
        var login_storage = new Object();
        if(JSON.parse(localStorage.getItem('login_avatar')) != null){
            login_storage = JSON.parse(localStorage.getItem('login_avatar'));
        }else{
            login_storage.tipo_mundo =  "";
        }
        $.ajax({
            async: true,
            url: 'ruta del archivo php',
            type: "POST",
            data: {
                tipo_contenido : args_content,
                tipo_mundo : login_storage.tipo_mundo
            },
            success: function(data){
                array=data.split('|');
                url=0
                imagen=1
                x=1;
                y=1;
                for(var i=0; i<=3;i++){                     
                    //$("#caos-grid div").prepend("<a href='#' id=grid"+x+"x"+y+" style='background:url("+array[i]+") no-repeat; background-size: 210px 135px;'></a>")
                    $("#caos-grid div a:eq("+i+")").attr({id:"grid"+x+"x"+y+"",
                        style:"background:url("+array[imagen]+") no-repeat; opacity: 0.5; background-size: 210px 135px; height:135px;",
                        href:""+array[url]+""})
                    //background-size: 193px 131px; width: 193px; height: 131px;
                    $("#grid2x1").css({left:"7px", width:"210px"});
                    $("#grid1x1").css({top:"-10px"});
                    $("#grid1x2").css({right:"-19px",top:"-10px"});
                    $("#grid2x2").css({width:"210px",
                        height:"135px",
                        right:"-19px"});
                    url=url+2;
                    imagen=imagen+2;
                    if(y==2){
                        x=x+1;
                        y=1;
                    }else{
                        y=y+1;          
                    }
                }
            }
        });
    }
 

[maycolalvarez]

yo preferiría hacer un pre-loader de las imágenes y no limitar la respuesta del hover ¿no te parece mejor?

de igual forma lo que quieres lo consigues de 2 formas:

-con un setTimeout
-con el evento onLoad de los IMG

[rikimm]

me late tu idea maycolalvarez del pre-loader pero quieres que sea obligatorio el tiempo de 2 segundos para hacer la función que esta adentro del over

y en caso de ser el pre-loader como lo hago?

[maycolalvarez]

tan simple como colocar las imágenes en unos img ocultos, usar sprites, o usando script de preloaders que puedes conseguir