Question

我有一个rails 4.2.3应用程序，我从各种来源（feedjira，onebox gems）获取图像到页面上。某些图像可能会被缓存，并且可以像往常一样加载。但如果在一个页面上有很多这些，页面加载需要很长时间。因此，从客户端javascript / jquery，我希望出去向src链接发出请求的图像被拦截，请求中止，src被透明的gif替换，并且异步下载图像。我想要的伪代码如下：

if ( $orders->have_posts() ){
        while ($orders->have_posts()) : $orders->the_post(); 
            $order = get_field('field_56e6a0f52ce6b');
            $prevEnd = null;
            $found_overlap = false;
            foreach($order as $o){
                $attractie = $o['attractie']->post_title;
                $start = $o['start'];
                $end = $o['end'];

                if($prevEnd !== null && $start < $prevEnd){
                   $found_overlap = true;
                }

                if ($found_overlap) {
                    echo "overlap\n";
                } else {
                    echo "no overlap\n";
                }

                $prevEnd = $end;
            }

        endwhile; 
}

具体来说，我正在寻找上述代码中虚构的$( window ).resize(function() { var chart = $('#container').highcharts(); var textX = chart.plotLeft + (chart.plotWidth * 0.5); var textY = chart.plotTop + (chart.plotHeight * 0.5); $('. placeBtn').css('left', textX + (span.width() * -0.5)); $('. placeBtn').css('top', textY + (span.height() * -0.5)); }); var chart = $('#container').highcharts(); var textX = chart.plotLeft + (chart.plotWidth * 0.5); var textY = chart.plotTop + (chart.plotHeight * 0.5); $('. placeBtn').css('left', textX + (span.width() * -0.5)); $('. placeBtn').css('top', textY + (span.height() * -0.5));状态和$("img").one("load", function() { // do stuff }).each(function() { if(this.requesting) { this.request.abort(); this.src = "//path/to/actual/image.jpg"; } });方法的真实世界等价物。我也对rails / jquery库/插件/代码的替代建议持开放态度。

如果完全相关，我正在使用turbolinks，但如果它出现问题，可以在这些图像加载时禁用它。

Answer 1

为此，我通常会构建一个预加载器。默认情况下，从asset_pipeline加载.gif以减少加载时间，并在DOM就绪加载外部源：

在您看来：

$(document).ready(function(){
  $.each($('.preloaded-picture'), function(index, obj){
    var img = new Image();
    img.src = $(obj).attr('data-source');

    $(img).ready(function(){
      $(obj).attr('src', img.src);
    })
  })
});

在你的javascript / jQuery中：

resultContent.DocumentNode.SelectNodes("//div[contains(@class, 'hello')]"))

如何使轨道视图页面上的所有图像异步加载？

1 个答案: