0

I would like to execute a scroll to function after all the elements for the section that I would like to scroll to have been created. I thought promises would be the way to go. This is what I have tried but it is not working, not sure how to write promises the right way when they are not used for ajax request: This is the script:

var showMagazineDetail = function showMagazineDetail(id, slug, name, summary, issueImage, magazineImage, page){
    images = [];
    nextImage = 0;
    imagesIndex = 0;
    loadedImages = [];
    scrollPoint = document.height;

    window.location.hash = slug;

    let createMagazineDetails = new Promise((resolve, reject) => {

      $(".magazine-section").css('visibility', 'visible');

      $('#name').text(name);
      $('#summary').text(summary);
      $('#cover-image').attr({"src" : '/imagecache/cover/' + issueImage, "alt" : name});

      if (magazineImage != '') {
        $('#issueImage').show();
        $('#issueImage').attr({"src" : '/imagecache/medium/' + magazineImage, "alt" : name});
      }else {
        $('#issueImage').hide();
        $('#issueImage').attr({"src" : '', "alt" : name});
      }

      // $('body').css('overflow-y', 'scroll');

      $.getJSON("issue/images",
          { id: id },
          function(result){
            if (result.length < 2){
                $('.magazine-preview-nav').hide();
            } else {
                $('.magazine-preview-nav').show();
            }
            $.each(result, function(i, value){
                images.push(value);
            });
            preload();
      });

    });

    createMagazineDetails.then(() => {
      $('html,body').animate({
         scrollTop: $(".magazine-detail").offset().top - 80
      });
    });
};

 preload = function() {
      for (i = 0; i < 4; i++) {
          if (nextImage < images.length) {
              var img = new Image();
              img.src = '/imagecache/cover/' + images[nextImage];
              loadedImages[nextImage] = img;
              ++nextImage;
          }
      }
  }
Leff
  • 1,968
  • 24
  • 97
  • 201
  • You have to resolve/reject your promise, else you won't be able to use `.then` and `.catch` – Corentin PRUNE Mar 28 '17 at 14:12
  • How exactly should I do that, I tried with wrapping the whole block inside the promise object with resolve but that didn't work, could you please provide code example? – Leff Mar 28 '17 at 14:13
  • is `preload` sync or async? – Kos Mar 28 '17 at 14:23
  • Preload is sync, I have added it to the code in the question – Leff Mar 28 '17 at 14:26
  • Do you want to wait for the elements to be *created* only, or for the images to be loaded as well? – Bergi Mar 28 '17 at 16:17
  • You're definitely missing some [`var` declarations](http://stackoverflow.com/q/1470488/1048572) for your variables – Bergi Mar 28 '17 at 16:19
  • Where in the code are you even *creating* any elements? All I can see is changing attributes of existing ones. – Bergi Mar 28 '17 at 16:20
  • Drop the `new Promise` thing and just `return` the promise that `$.getJSON` returns – Bergi Mar 28 '17 at 16:21
  • Sorry, I was misleading there, I am changing attributes, but when I am doing so, it takes some time until the image is replaced with the new one and that is when the scroll event takes place and doesn't go to the right place. Since it takes some time probably from the server side to create those images, since I am using php imagecache, and then if the cache is cleared, it fetches the image from the server and then it takes time to get that. ```$.getJSON```doesn't influence that since I am only fetching images for magazines issues slider there, and they are not shown when scrolling happens. – Leff Mar 29 '17 at 07:18

0 Answers0