缓慢的网络/手机上的图像加载递归链问题

所以基本上我有一个页面，有几个部分。每个部分包含5-30个图像图标，这些图标的大小相当小，但足够大，我想操纵它们的加载顺序。缓慢的网络/手机上的图像加载递归链问题

我使用一个名为collagePlus的库，它允许我给它一个元素列表，它将拼贴到一个漂亮的图像网格中。这里的想法是从图像的第一部分开始，加载图像，显示网格，然后移动到图像的下一部分直到最后。一旦我们到达最后，我会传递一个回调函数，初始化我正在使用的一个库库，称为fancybox，它只是在点击时使所有图像互动（但不会修改图标的状态/样式）。

var fancyCollage = new function() { /* A mixed usage of fancybox.js and collagePlus.js */ 
    var collageOpts = { 
     'targetHeight': 200, 
     'fadeSpeed': 2000, 
     'allowPartialLastRow': true 
    }; 

    // This is just for the case that the browser window is resized 
    var resizeTimer = null; 
    $(window).bind('resize', function() { 
     resetCollage(); // resize all collages 
    }); 

    // Here we apply the actual CollagePlus plugin 
    var collage = function(elems) { 
     if (!elems) 
      elems = $('.Collage'); 
     elems.removeWhitespace().collagePlus(collageOpts); 
    }; 

    var resetCollage = function(elems) { 
     // hide all the images until we resize them 
     $('.Collage .Image_Wrapper').css("opacity", 0); 
     // set a timer to re-apply the plugin 
     if (resizeTimer) clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(function() { 
      collage(elems); 
     }, 200); 
    }; 

    var setFancyBox = function() { 
     $(".covers").fancybox({/*options*/}); 
    }; 

    this.init = function(opts) { 
     if (opts != null) { 
      if (opts.height) { 
       collageOpts.targetHeight = opts.height; 
      } 
     } 
     $(document).ready(function() { 
      // some recursive functional funk 
      // basically goes through each section then each image in each section and loads the image and recurses onto the next image or section 
      function loadImage(images, imgIndex, sections, sectIndex, callback) { 
       if (sectIndex == sections.length) { 
        return callback(); 
       } 
       if (imgIndex == images.length) { 
        var c = sections.eq(sectIndex); 
        collage(c); 
        images = sections.eq(sectIndex + 1).find("img.preload"); 
        return loadImage(images, 0, sections, sectIndex + 1, callback); 
       } 
       var src = images.eq(imgIndex).data("src"); 
       var img = new Image(); 
       img.onload = img.onerror = function() { 
        images[imgIndex].src = src; // once the image is loaded set the UI element's source 
        loadImage(images, imgIndex + 1, sections, sectIndex, callback) 
       }; 
       img.src = src; // load the image in the background 
      } 

      var firstImgList = $(".Collage").eq(0).find("img.preload"); 
      loadImage(firstImgList, 0, $(".Collage"), 0, setFancyBox); 
     }); 
    } 
}

从我的画廊我然后调用init函数。

看起来好像我的递归链由img.onload或img.onerror触发无法正常工作，如果图像需要一段时间来加载（慢速网络或移动）。我不确定我在这里错过了什么，所以如果任何人都可以在那里打牌，那就太棒了！

如果没有明确什么是从我贴你可以在这里看到一个活生生的例子代码脚麻：https://www.yuvalboss.com/albums/olympic-traverse-august-2017

它工作的很好我的桌面上，但在我的Nexus 5X它不工作，似乎最终几乎没有拼贴电话发生。我现在花了很长时间在这个上面，所以打开这个看看我能否得到一些帮助。感谢大家！

来源

2017-09-04 Yuval

只有两个提示：您的'resetCollage' check：'clearTimeout'不会将指针设置为'null'，所以请自行设置：'resizeTimer = null;'---关于缓慢连接：使用Chrome开发人员工具并将Network throttling设置为较慢值，那么你可以在你的桌面上进行调试。希望这可以帮助！ – deblocker

@deblocker它不需要将其设置为null，只需将其重置为另一个200ms，以便拼贴（elems）不会被频繁调用。我已经在使用节流的桌面上的chrom和firefox中使用开发工具进行了测试，并且我无法重现我在移动设备上遇到的问题。我认为它有专门的移动浏览器（甚至无法在chromes移动模拟器中重现）。 – Yuval

呃我想通了！渐渐这个问题，我现在仍然不能确定这是什么意思

[Violation] Forced reflow while executing JavaScript took 43ms

搬进出现这种情况只有一次的所有图像加载

$(window).bind('resize', function() { 
    resetCollage(); // resize all collages 
});

出于某种原因，是越来越早叫这个回调即使浏览器从未调整大小，导致拼贴在没有元素存在时被调用。

如果任何人有任何信息的输入，为什么我得到这个js违规将是巨大的，知道这样我就可以做出更好的修复，但现在这个工作:) :) :)

来源

2017-09-06 03:26:52 Yuval

缓慢的网络/手机上的图像加载递归链问题

回答

相关问题