在 ajax 请求后使用 jQuery 交换图像 src

Question

I need to swap the image src of an img element using jQuery . I fetch the images using $.getJSON() and this is a different one every time. I've chained this swap to the hover of an <li> element using jQuery, but sometimes it will lag a bit when the image is changed or the image isn't loaded correctly on the first hover. I need a valid solution that can help me to do the trick. Here is the code:

HTML:

<div class="col-md-2 col-lg-2 text-right portfolio-thumb">
    // here I used a static img tag, but I've opted to append it everytime.
    <img class="img-fluid portfolio-nav-thumb" width="80" src="">
</div>
<div class="col-md-4 col-lg-4 portfolio-nav">
    <ul class="navbar-nav ml-auto">
        <?php if( $portfolio->have_posts() ): while( $portfolio->have_posts() ): $portfolio->the_post(); ?>
            <li class="nav-item portfolio-nav-el"><a  data-id="<?php echo get_post_thumbnail_id(); ?>" class="nav-link portfolio-nav-link" href="<?php the_permalink(); ?>"><?php the_title('<h4>', '</h4>'); ?></a></li>
        <?php endwhile; ?>
        <?php endif; wp_reset_postdata(); ?>
    </ul>
</div>

JS:

$('.portfolio-nav-el').on('hover', function(e){
    e.preventDefault();

    // here I empty the img container div
    $('.portfolio-thumb').empty();
    var id = $(this).children('.portfolio-nav-link').attr('data-id');

    //console.log(id);
    $.getJSON('https://localhost/wordpress/wp-json/wp/v2/media/'+id, function(response){
        // here I'm adding the img element to the parent container div
        $('.portfolio-thumb').html('<img class="img-fluid portfolio-nav-thumb" src="'+ response.source_url +'" width="80">');
    });
});

A preload or a fade solution can be fine?

Answer 1

$(document).on('hover', '.portfolio-nav-el', function() {
   //Enter your code here...
});

This code will work on the elements that are created after ajax

Answer 2

I think you answered yourself. The preload is the best solution imo. I would probably load thumbnails for all items in the list. Maybe in base64 form, store it in propriate data attribute of each item and then, on hover, use it in src of your '.portfolio-thumb' element.