Почему скрипт не у всех картинок выводит title?

289

31 июля 2017, 15:12

Если на странице несколько изображений, которые соответствуют всем условиям в скрипте, то title выводится у всех картинок. Если же на странице много картинок, например, около двадцати или даже более, и все картинки также соответствую всем условиям в скрипте, то title выводится лишь у нескольких первых картинок, а у остальных не выводится. Как-то это не поддается никакой логике. Почему так, и как это можно устранить?

$(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>";
  });
});

Answer 1

Вариант с ожиданием события load для window (ожидание загрузки всех картинок перед выполнением скрипта):

$(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>

Вариант с ожиданием события load для каждой картинки отдельно (без установки src в JS, на базе этого ответа):

$(document).ready(function() { 
  var $newsImg = $(".news img"); 
  $newsImg.on("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>

Answer 2

$(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>";
    });
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Подскажите что значит &=

Есть вот такая строка кода

301

javascript

Как обновить страницу в jquery ajax запросе?

Есть одна кнопка или форма на которой висит обработчик и при нажатии происходит ajax запросПри успешном выполнении я могу в success только поместить...

346

javascript