Load image url - Jquery

Question

I have the following code you click on input that has the image URL:

<input name="miniatura" value="<?php echo $miniatura;?>" class="miniatura">
<img id="miniatura_exibe" />

//carregar url de imagem
$(document).on('click','.miniatura',function(){

      var valor = $(this).val();

      $('#miniatura_exibe').attr('src', valor);

});

How do I stop instead of displaying the image at the click of the input, display on the page load? I’ve tried $(document).on('ready','.miniatura',function(){ I couldn’t. I don’t know if it works that way.

Use the Jquery in:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answer 1

You can do it like this:

$(function(){
   $("#miniatura_exibe").attr("src", $(".miniatura").val());
});

The $(function(){ is the same as $(document).ready(function(){, that is, when the DOM is loaded.

To documentation informs that the syntax $(function(){ is recommended as of version 3.0:

As of jQuery 3.0, only the first syntax is Recommended; the other syntaxes still work but are deprecated.

That is to say, $(document).ready( (among other syntaxes cited in the documentation) still work, but are obsolete.