Carregar do Banco de dados só quando estiver 100% carregado

[kaiquemix 1]

Na parte de Portfolio, ao aperta em carregar +, vocês podem ver que carrega primeiro o bloco e depois as imagens com um delay de 1 segundo.

VEJA NO SITE: somospixel.com/test

Eu quero que só carregasse quando as imagens ja estiverem sido carregadas.

Função que pega os dados:

        function pegaDados()
        {
            var idUltimo = $("#buttonIdUltimoItem").val();
            jQuery.ajax
                ({
        
                    url: "pegaPortifolio.php?id="+idUltimo,
                    dataType: "json", //Tipo de Retorno
                    success:
                    function(data) {
                        console.log(data);
                        var pt1 = "";
                        var i = 1;
                        var ultimo_id = 0;
        
                          var size = 0, key;
                          for (key in data) {
                                if (data.hasOwnProperty(key)) size++; 
        
                            }
        
                         for(i = 0; i < size; i++){
        
                             pt1 +='<div class="element-item filter filtros todos  '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" onclick="portfolioModal('+data[i].id+')" class="portfolio-link" data-toggle="modal"><img src="images/port/mini/'+data[i].imageM+'" alt="project 2"><div class="fundo-port"><h1>'+data[i].tipo+'</h1><h2>'+data[i].nome+'</h2></div></a></div></div></div>';
                             
                            
                             ultimo_id = data[i].id;
                             
                             $("#buttonIdUltimoItem").val(ultimo_id);
                             
                          }
        
                          monta_html(pt1);               
        
                    }
                });
             filtrar($('#buttonIdUltimoItem').attr('class'));
        
        }
    
    function monta_html(dados){
    
      $(".grid").append(dados); //joga o valor para um elemento html
    }

GRID onde está os blocos ja carregados:

     <div class="wrap">
    <div class="grid">
          <?php
    $servidor = 'localhost';
    $banco      = '###';
    $usuario  = '###';
    $senha    = '##';
    $link     = @mysql_connect($servidor, $usuario, $senha);
    $db          = mysql_select_db($banco,$link);
    $idUltimoItem = 0;
    if(!$link)
    {
        echo "erro ao conectar ao banco de dados!";exit();
    }
    
    $sql = "SELECT * FROM portfolio ORDER BY id DESC limit 6";
    $query = mysql_query($sql);
    
    while($sql = mysql_fetch_array($query)){
    $id = $sql["id"];
    $idUltimoItem = $id;
    $nome = $sql["nome"];
    $tipo = $sql["tipo"];
    $desc = $sql["desc"];
    $menu = $sql["menu"];
    $imageM = "images/port/mini/" . $sql["imageM"];
    $imageF = $sql["imageF"];
        ?>
              <div class="element-item filter filtros todos <?php echo "$menu";?>" data-category="transition">
                  
                  <div style="padding:2.5px;">
                  <div style="border: 1px solid #AAAAAA;">
                       <!--<a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" id="executaAjax" value="Executa ajax">-->
                       <a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax">
                                                <img src="<?php echo "$imageM"?>" alt="project 2">
                          <div class="fundo-port">
                            <h1><?php echo "$tipo"?></h1>
                            <h2><?php echo "$nome"?></h2>
                        </div>
    
                          </a>
                      
                      </div>
                  
                  </div>
                  
      </div>
            <?php
    }
    ?> 
    </div></div>

BOTÃO

 <div id="rend-more">
             <!-- <input type="hidden" value="0" id="ultimo_id"> campo oculto que armazena o valor do ultimo ID buscado no banco -->
    
                <button  type="button" id="buttonIdUltimoItem" onClick="pegaDados();" value="<?= $idUltimoItem;?>" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer;  background-color: white;" class="todos">
                    <h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>
                    <h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button>
            </div> 

Pegar Portfolio:

    <?php
    
    function fn_conexao(){
    
        $dbuser = "####";
        $dbpass = "####";
    
        try {
    
            $pdo = new PDO('mysql:host=localhost;dbname=###',  $dbuser, $dbpass);
            $pdo -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
        } catch(Exception $e) {
    
            echo 'Erro na conexao: ' . $e->getMessage();
        }
    
        return $pdo;
    }
    
    function dados($pdo){
    
        try {   
    
                if(!isset($_GET['id']) or $_GET['id'] == null){
    
                    $id = 0; //se o GET nao for enviado o for enviado como nullo , a variável ID pega o valor de 0
    
                }else{
    
                    $id = $_GET['id']; //pega o valor passado via GET
                }
    
                $arr = array();
    
                $sql = "ALTER DATABASE portfolio CHARSET = UTF8 COLLATE = utf8_general_ci";
                $sql = "SELECT * FROM portfolio WHERE id < $id ORDER BY id DESC LIMIT 6";
                $stmt = $pdo->prepare($sql);
                $stmt->execute();
                $linha = $stmt->fetchAll(PDO::FETCH_ASSOC);
                if($stmt->rowCount() >= 1){
    
                    return $linha; //retorna o resultado da query
    
                }else {
    
                    return 0;
    
                }
            } catch(Exception $e) {
    
                print 'Erro ao inserir os dados no banco: ' . $e->getMessage();
                $conexao = desconecta($conexao);
    
            }
    }
    
    $conexao = fn_conexao();
    $dados = dados($conexao);
    
    $dados = json_encode($dados); //converte o resultado para json
    
    print $dados; //imprime os dados na tela
    ?>

 

[DSerma 19]

Coloque o script que deseja carregar apenas quando a página estiver carregada, dentro de:

$(document).ready(function(){

 //aqui vai seu script;

});

[kaiquemix 1]

 

Coloque o script que deseja carregar apenas quando a página estiver carregada, dentro de:

$(document).ready(function(){

 //aqui vai seu script;

});

amigo, eu quero que quando eu aperte em CARREGAR + so carregue os blocos do banco de dados quando estiver carregado a imagem, pois está carregando o bloco da div e depois a imagem por delay do banco de dados..

a pagina ja vai ta carregada, é um tipo de função ajax

[FlavioBrognara 0]

Já pensou em colocar um timer?