加载内容时用户不会注意到

Question

我正在编写与tinder类似的功能。图像会显示给用户，用户可以向右或向左滑动图像。

当用户轻扫图像时，隐藏的数据将通过ajax传输到服务器并写入数据库。

控制器：

public function index()
    {
        $finderpost = Post::where('type', 7)->where('user_id', '!=' , Auth::user()->id)
            ->whereNotExists(function ($query) {
                $query->select(DB::raw(1))
                    ->from('users_finder')
                    ->whereColumn('users_finder.post_id', 'posts.id')
                    ->where('users_finder.user_id', auth()->id());
            })->get();

        return view('finder.finder', compact('finderpost'));
    }

public function swipeRight(Request $request) {

        $this->validate($request, [

            'id' => 'required|numeric'
        ]);

        $foundfinder = Finder::where('user_id', Auth::user()->id)->where('post_id',$request->id)->first();

        if ($foundfinder) {
            $foundfinderId = Finder::find($foundfinder->id);

            $foundfinderId->delete();
        }

        Finder::firstOrCreate([
            'user_id' => Auth::user()->id,
            'post_id' => $request->id,
            'active' => '1'
        ]);

        $data = [
            'message' => trans('messages.like'),
        ];

        return response()->json($data, 200);
    }

    public function swipeLeft(Request $request) {

        $this->validate($request, [

            'id' => 'required|numeric'
        ]);

        $foundfinder = Finder::where('user_id', Auth::user()->id)->where('post_id',$request->id)->first();

        if ($foundfinder) {
            $foundfinderId = Finder::find($foundfinder->id);

            $foundfinderId->delete();
        }

        Finder::firstOrCreate([
            'user_id' => Auth::user()->id,
            'post_id' => $request->id,
            'active' => '0'
        ]);

        $data = [
            'message' => trans('messages.dislike'),
        ];

        return response()->json($data, 200);
    }

查看：

<div class="col-md-4 col-md-offset-3 mt-30">
                    @foreach($finderpost as $post)

                    <div id="swipeFinder" class="card card-default">
                        <div class="card-block">
                            <input type="hidden" name="id" value="{{$post->id}}">
                            @if($post->postsImages->count() == 1)
                                <img class="img-fluid" src="{{ Storage::url($post->image_thumbnail) }}" alt="" />
                            @else
                                <div class="owl-carousel-2 controlls-over owl-caption-bottom-center clearfix" data-plugin-options='{
                                    "responsiveBaseElement":    "#middle",
                                    "loop":                     true,
                                    "margin":                   0,
                                    "nav":                      false,
                                    "dots":                     true,

                                    "center":                   true,
                                    "slideBy":                  "1",
                                    "autoplay":                 true,
                                    "autoplayTimeout":          3000,
                                    "autoWidth":                true,
                                    "merge":                    false,
                                    "rtl":                      false,

                                    "animateIn":                "fadeIn",
                                    "animateOut":               "fadeOut",

                                    "items":                    1

                                    }'>


                                    @foreach ($post->postsImages as $postimage)
                                        <div class="owl-item">
                                            <img class="img-fluid" src="{{ Storage::url($postimage->image_thumbnail) }}" alt="" />
                                        </div>
                                    @endforeach

                                </div>
                                @endif
                        </div>
                    </div>

                    @endforeach
                </div>

JS：

$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(function() {
            //Enable swiping...
            $("#swipeFinder").swipe( {
                //Generic swipe handler for all directions
                swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
                    $(this).addClass('rotate-right_swipe');

                    var id = $("input[name=id]").val();

                    $.ajax({
                        type: 'GET',
                        data: {id:id},
                        url: '/iboard/finder/like',
                        dataType: 'JSON',
                        success: function (data) {
                            _toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
                        },
                        error: function (xhqr, staus, message) {
                            var response = JSON.parse(xhqr.responseText);
                            var errors = response.errors;
                            for (var error_key in errors) {
                                var error = errors[error_key];
                                _toastr_new(error, "top-full-width", "error", false, '.toastr-notify', 0);
                            }
                        }
                    });
                },
                swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
                    $(this).addClass('rotate-left_swipe');

                    var id = $("input[name=id]").val();

                    $.ajax({
                        type: 'GET',
                        data: {id:id},
                        url: '/iboard/finder/dislike',
                        dataType: 'JSON',
                        success: function (data) {
                            _toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
                        },
                        error: function (xhqr, staus, message) {
                            var response = JSON.parse(xhqr.responseText);
                            var errors = response.errors;
                            for (var error_key in errors) {
                                var error = errors[error_key];
                                _toastr_new(error, "top-full-width", "error", false, '.toastr-notify', 0);
                            }
                        }
                    });
                },
                //Default is 75px, set to 0 for demo so any distance triggers swipe
                threshold:0
            });
        });

我对此有三个小问题。如何在后台加载新图像，而又不会引起用户任何注意，并且用户可以在加载图像时放松并继续滑动？

如何向用户显示新图像？

我如何在用户刷卡时突然显示错误消息？