Question

我的页面上有一个图片库，其效果非常像pinterest。

  <FormControl componentClass="select" placeholder="select">
        <option value="select">select</option>
        <option value="other">...</option>
  </FormControl>

在我的图片页面上，我从5张图片开始。

控制器：

$images = Images::paginate(5);

标记：

if($request->ajax()) {
    return [
        'images' => view('browse.partials.imagePartials')->with(compact('images'))->render(), 'next_page' => $images->nextPageUrl()
    ];
}           

return view('browse.combined_results')->with('images', $images);

这些图像使用freewall安排：

<div id="freewall" class="freewall endless-pagination" data-next-page={{ $images->nextPageUrl() }}>
@foreach ($images as $image)
<a href="{{ route('image.get', ['username' => $image->created_by_username, 'URLtitle' => $image->url_title]) }}">
    <div class='brick featuredTextContainer' style="width:150px">
        <img src='{{ url($image->medium_path) }}' width='100%' class="profileImg">
        <span class="featuredArtistName">{{ $image->title }}</span>             
    </div>
</a>
@endforeach
</div>

wall.fitWidth（）是整齐排列图像的方法，如下所示：

但是，如果向下滚动，则会收到ajax请求

var wall = new Freewall("#freewall");
wall.reset({
    selector: '.brick',
    animate: true,
    cellW: 150,
    cellH: 'auto',
    onResize: function() {
        wall.fitWidth();
    }
});

var images = wall.container.find('.brick');
images.find('img').on('load', function() {
    wall.fitWidth();
});

wall.fitWidth();

ajax请求加载部分，这实际上只是分页的下一页。

imagePartial.blade.php

$(window).scroll(fetchImages);

function fetchImages() {
    var page = $('.endless-pagination').data('next-page');

    if(page !== null) {

        clearTimeout( $.data( this, "scrollCheck" ) );

        $.data( this, "scrollCheck", setTimeout(function() {
            var scroll_position_for_images_load = $(window).height() + $(window).scrollTop() + 100;

            if(scroll_position_for_images_load >= $(document).height()) {
                $.get(page, function(data){
                    $('.endless-pagination').append(data.images);
                    $('.endless-pagination').data('next-page', data.next_page);
                });

            }
        }, 350))

    }
}

换句话说，它会将更多图像从$ images分页加载到图像容器中。

哪个好。有用。但是，图像不会立即排列。您必须再次执行@foreach ($images as $image) <a href="{{ route('image.get', ['username' => $image->created_by_username, 'URLtitle' => $image->url_title]) }}"> <div class='brick featuredTextContainer' style="width:150px"> <img src='{{ url($image->medium_path) }}' width='100%' class="profileImg"> <span class="featuredArtistName">{{ $image->title }}</span> </div> </a> @endforeach才能使图像适合放置。问题是，我不能简单地将它放在wall.fitWidth()函数的末尾，因为图像需要花费一些时间才能加载。因此，所有图像都被加载到其他图像后面，未经安排。

对此的解决方案是，将新图像加载到不透明度设置为0，在检查后执行 fetchImages函数以确保所有图像已经加载到DOM中，然后将图像设置回不透明度：1。但我不知道如何做到这一点。

帮助？

Answer 1

你可以这样做 - 准备一个变量

var loading = 0;

和一个功能

function imageLoaded(){
 loading -= 1;
 if(loadingImages == 0){
  wall.fitWidth();
  var imgs = document.getElementsByTagName('img');
  for(var i=0;i<imgs.length;i++)
   if(imgs[i].style.opacity == '0')
    imgs[i].style.opacity = '1';
 }
}

然后将其添加到所有图像元素/图像模板

onload="imageLoaded();" style="opacity:0;"

最后，无论何时加载新图像，都要按新图像的数量增加加载变量。

修改：

回复你的评论：

onload="loading-=1;if(loadingImages==0){wall.fitWidth();var imgs=document.getElementsByTagName('img');for(var i=0;i<imgs.length;i++)if(imgs[i].style.opacity=='0')imgs[i].style.opacity='1';}}" style="opacity:0;"

很难看，但确保不会出现任何背景错误。

在ajax调用完成后，在Laravel中加载图像后触发一个函数

1 个答案: