Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Don’t load images at first

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #35540
    farzadina
    Participant

    I have several buttons, when you click on one of them, that show an image.
    The problem is: the images load before clicking on them. I want to load images, after clicking on a button.
    How to do that?

    #92213
    noahgelman
    Participant

    You can use javascript or jQuery to create a new image element with the ‘src’ pointing to the new image you want.

    #92323
    farzadina
    Participant

    How?

    #92817
    farzadina
    Participant

    How I can use Jquery to create a new image element?

    #92821
    angelazou
    Participant

    Well, you can choose to start loading after the onClick event occurs.

    #92832
    farzadina
    Participant

    I know, but all of the files load at first. Why to use start loading onClick for a loaded item?
    I want to prevent jquery from loading an image at first.

    #92835
    Johnnyb
    Member

    You can add an image to the DOM on a click event using jQuery in a few ways, here is one way:


    $('#button').click(function() {
    $('#element-to-add-image-to').append('Image description');
    });

    The image isn’t on the page until you add it and so it won’t load until then.

    And you can remove it from the DOM like so:


    $('#button').click(function() {
    $('.newImage').remove();
    });
    #92841
    farzadina
    Participant

    Thanks, that worked great for a single image. Also I want to know can add DIV on a click event?

    append(‘Can a DIV be Here?’)

    #92848
    Johnnyb
    Member

    Yep, try it out and see! You can append any HTML element you like.

    #92949
    farzadina
    Participant

    Thanks @Johnnyb, everything is clear and work great! ;)

    @Hompimpa
    , that looks good, but I didn’t tried that.

    #93085
    Mottie
    Member

    @Homepimpa With HTML5 you can use the data attribute: data-* where * is any name without spaces (ref).

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.