If there are several images on the page that meet all the conditions in the script, then the title is displayed for all pictures. If there are a lot of pictures on the page, for example, about twenty or even more, and all the pictures also meet all the conditions in the script, then the title is displayed only in the first few pictures, and the rest are not displayed. Somehow it defies any logic. Why so, and how can this be eliminated?

 $(document).ready(function(){ newsImg = $(".news img"); newsImg.after(function() { imgTitle = $(this).attr("title"); if (imgTitle && imgTitle != '' && $(this).width() > 500 && $(this).css('float') == 'none') return "<div class='img_title'>" + imgTitle + "</div>"; }); });
  • Comments are not intended for extended discussion; conversation moved to chat . - PashaPash ♦

2 answers 2

The option of waiting for the load event for the window (waiting for all pictures to load before executing the script):

 $(window).on("load", function() { var $newsImg = $(".news img"); $newsImg.after(function() { var imgTitle = this.title; if (imgTitle && imgTitle != '' && $(this).width() > 500 && $(this).css('float') == 'none') return "<div class='img_title'>" + imgTitle + "</div>"; }); }); 
 <div class="news"> <img title="img1" src="https://via.placeholder.com/510x50" /> <img title="img2" src="https://via.placeholder.com/510x60" /> <img title="img3" src="https://via.placeholder.com/510x70" /> <img title="img4" src="https://via.placeholder.com/510x80" /> <img title="img5" src="https://via.placeholder.com/510x90" /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The option of waiting for the load event for each image separately (without installing src in JS, based on this response ):

 $(document).ready(function() { var $newsImg = $(".news img"); $newsImg.one("load", function() { $(this).after(function() { var imgTitle = this.title; if (imgTitle && imgTitle != '' && $(this).width() > 500 && $(this).css('float') == 'none') return "<div class='img_title'>" + imgTitle + "</div>"; }); }).each(function() { if (this.complete) $(this).trigger("load"); }); }); 
 <div class="news"> <img title="img1" src="https://via.placeholder.com/510x51" /> <img title="img2" src="https://via.placeholder.com/510x61" /> <img title="img3" src="https://via.placeholder.com/510x71" /> <img title="img4" src="https://via.placeholder.com/510x81" /> <img title="img5" src="https://via.placeholder.com/510x91" /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • Regent good afternoon! I tried to install the second option. I noticed, very strange of course, but the title duplicated in some pictures. Not at all, but only at some two times the div is displayed. - LADYX
  • one
    @LADYX try $newsImg.one(... instead of $newsImg.on(... - Regent
  • Regent forgive me, please, for a long silence. Yes, replaced, now the title not duplicated. Thank you very much! Good luck! - LADYX
 $(window).load(function() { newsImg = $(".fullstory img"); newsImg.after(function() { imgTitle = $(this).attr("title"); if (imgTitle && imgTitle != '' && $(this).width() > 500 && $(this).css('float') == 'none') return "<span class='img_title'>" + imgTitle + "</span>"; }); });