Сценарии jQuery различаются в зависимости от первой загрузки или второго обновления - PullRequest
Новая
       10

Сценарии jQuery различаются в зависимости от первой загрузки или второго обновления

0 голосов
/ 05 октября 2018

У меня есть скрипт, который динамически добавляет html-код с помощью jQuery (просматривает текстовый файл и загружает изображения).После этого я применяю динамический стиль CSS и события onclick к ранее загруженным изображениям.

Когда я загружаю страницу в первый раз, она работает нормально.Но когда я обновляю (обычный F5), сценарии выполняются в обратном порядке (сначала изменяются CSS и события, затем добавляется HTML-код), поэтому, очевидно, изображения не имеют CSS и событий, которые мне нужны.

Я знаюони выполняются в обратном порядке, потому что я «отлажен» с помощью предупреждений.И они появляются в обратном порядке при первой загрузке, чем при втором обновлении.

Я подозреваю, что это проблема синхронизации относительно событий загрузки (onload, DOMload и т. Д.).

Я спрашиваю здесьпотому что все, что я мог найти, было сообщение о людях, имеющих противоположную проблему.Их код не работает при первой загрузке, но работает нормально после обновления.Я не нашел ни одного поста о своей проблеме.

Это мой index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Magnum</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicons
    ================================================== -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css"  href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">

<!-- Stylesheet
    ================================================== -->
<link rel="stylesheet" type="text/css"  href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/default.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.js"></script>


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">



<!-- Navigation -->
<div id="nav">
  <nav class="navbar navbar-custom">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button>
      </div>
      
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-main-collapse">
        <ul class="nav navbar-nav">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li class="hidden"> <a href="#page-top"></a> </li>
          <li> <a class="page-scroll" href="#about">About</a> </li>
          <li> <a class="page-scroll" href="#portfolio">Portfolio</a> </li>
          <li> <a class="page-scroll" href="#contact">Contact</a> </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<!-- Portfolio Section -->

<div id="portfolio">
  <div class="container">
    <div class="section-title text-center center">
      <h2>Portfolio</h2>
      <hr>
    </div>
    <div class="categories">
      <ul class="cat">
        <li>
          <ol class="type">
            <li><a href="#" data-filter="*" class="active">All</a></li>
            <li><a href="#" data-filter=".graphic">Graphic Design</a></li>
            <li><a href="#" data-filter=".illustration">Illustration</a></li>
            <li><a href="#" data-filter=".photography">Photography</a></li>
          </ol>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="row">	
      <div class="portfolio-items" id="portfoli">
	  
		<div class="col-sm-6 col-md-3 col-lg-3 graphic">
          <div class="portfolio-item">
            <div class="hover-bg"> <a href="img/portfolio/01-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
              <div class="hover-text">
                <h4>Project Title</h4>
              </div>
              <img src="img/portfolio/01-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
          </div>
        </div>
		
        <div class="col-sm-6 col-md-3 col-lg-3 illustration">
          <div class="portfolio-item">
            <div class="hover-bg"> <a href="img/portfolio/02-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
              <div class="hover-text">
                <h4>Project Title</h4>
              </div>
              <img src="img/portfolio/02-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/MostrarPortfoliIllustracio.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/SmoothScroll.js"></script> 
<script type="text/javascript" src="js/nivo-lightbox.js"></script> 
<script type="text/javascript" src="js/jquery.isotope.js"></script> 
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script> 
<script type="text/javascript" src="js/contact_me.js"></script> 
<script type="text/javascript" src="js/main.js"></script>


</body>
</html>

Это скрипт, который динамически добавляет html из txt файла (MostrarPortfoliIllustracio.js): 

$.get('portfoli.txt', function(data) {
  console.log("x.x");
  var lines = data.split('\n');
  var foto = [];
  for (var i = 0; i < lines.length; i++) {
    alert("---> " + i);
    foto[i] = lines[i].split(";");
    document.getElementById("portfoli").innerHTML += '<div class="col-sm-6 col-md-3 col-lg-3 ' + foto[i][0] + '">' +
      '<div class="portfolio-item">' +
      '<div class="hover-bg"> <a href="img/portfolio/' + foto[i][1] + '" title="' + foto[i][2] + '" data-lightbox-gallery="gallery1">' +
      '<div class="hover-text">' +
      '<h4>' + foto[i][3] + '</h4>' +
      '</div>' +
      '<img src="img/portfolio/' + foto[i][4] + '" class="img-responsive" alt="Project Title"> </a> </div>' +
      '</div>' +
      '</div>';
  }
}, 'text');

Это скрипт main.js, который изменяет теги css и events: 

function main() {
  (function() {
    'use strict';

    $('a.page-scroll').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top - 40
          }, 900);
          return false;
        }
      }
    });

    // affix the navbar after scroll below header
    $('#nav').affix({
      offset: {
        top: $('header').height()
      }
    });

    // Portfolio isotope filter
    $(window).load(function() {
      console.log("o.o");
      var $container = $('.portfolio-items');
      $container.isotope({
        filter: '*',
        animationOptions: {
          duration: 750,
          easing: 'linear',
          queue: false
        }
      });
      $('.cat a').click(function() {
        $('.cat .active').removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $container.isotope({
          filter: selector,
          animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
          }
        });
        return false;
      });

    });
    // Nivo Lightbox 
    $('.portfolio-item a').nivoLightbox({
      effect: 'slideDown',
      keyboardNav: true,
    });
  }());
}
main();
...