2

这是有趣的。我正在使用Behance API从我的个人资料中调用一些数据来制作一个小型投资组合轮播。将QueryLoader2添加到我的网页后，我开始发现这些错误：

控制台错误

我试图添加<?php header('Access-Control-Allow-Origin: *'); ?>到我的页面顶部，但没有任何更改。

然后我尝试添加Header set Access-Control-Allow-Origin * 到我的 .htaccess 文件中仍然无济于事。

更多可能有用的代码：

查询加载器 JavaScript：

<script src="https://cdn.jsdelivr.net/jquery.queryloader2/2.3/jquery.queryloader2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
    $("body").queryLoader2({
        percentage:true
    });
});
</script>

Behance API 引导投资组合脚本：

$(function () {

    var beUsername = 'josephrobee27e',
        beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
        bePerPage = 25,
        beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
        beItemWidth = 360,
        beItemHeight = 282,
        beLazyLoad = true,
        beLinkTarget = '_self';

    /**
     * Get Data from Behance API
     */
    if (sessionStorage.getItem('behanceProject')) {
        setPortfolioTemplate();
    } else {
        // Load JSON-encoded data from the Behance API & Store it in sessionStorage
        $.getJSON(beProjectAPI, function (project) {
        sessionStorage.setItem('behanceProject', JSON.stringify(project));
            setPortfolioTemplate();
        });
    }

    /**
     * Populate Data
     */
    function setPortfolioTemplate() {
        var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
        var portfolio = $('.be__portfolio').html('');
        var items = '';
        var image = '';
        var viewmorelink = '';

        $.each(projects, function (i, val) {
            // If Lazy load is enabled, edit the markup accordingly
            beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';

            // Create the items template
            items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-6 col-xs-12 desc">';
            items += '<div class="project-wrapper">';
            items += '<div class="project">';
            items += '<div class="photo-wrapper">'
            items += '<div style="position: relative;padding-bottom: 69%;height: 0;" class="photo">';
            items += '<a class="fancybox" target="_blank" href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
            items += '<div style="background-image:url(\''+ val.covers.original +'\');background-size:cover;background-position:center;background-repeat: no-repeat;width:370px;height:255px;max-width:100%;position:absolute;top:0;left:0;width:100%;height:100%;"></div>';
            items += '</a>';
            items += '</div>';
            items += '<div class="overlay"></div>';
            items += '</div>';
            items += '</div>';
            items += '</div>';
            items += '</div>';

            // How many items are shown
            if ($(".be__slider")[0]){
            return i < 8;
            }else{
                return i < bePerPage;
            }
        });

        // Append items only once
        portfolio.each(function (index, el) {
            $(el).append(items);
            if ($(".be__slider")[0]){
            viewmorelink += '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 desc">';
                viewmorelink += '<div class="project-wrapper">';
                viewmorelink += '<div>';
                viewmorelink += '<div style="position: relative;padding-bottom: 69%;height: 0;">';
                viewmorelink += '<div class="photo vertical-center" style="background-color:#206182;width:370px;height:255px;max-width:100%;position:absolute;top:0;left:0;width:100%;height:100%;">';
                viewmorelink += '<a href="http://josephrobertsdesigns.com/index.php/portfolio" class="btn btn-default">';
                viewmorelink += '<h2 style="margin-top:0;margin-bottom:0;"><i class="fa fa-clone"></i> View Entire Portfolio</h2>';
                viewmorelink += '</a>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                viewmorelink += '</div>';
                $(el).append(viewmorelink);
            }
        });

        // Create Lazy Load instance for Grid Layout
        if (beLazyLoad) {
            var layzr = new Layzr({
                container: '.be__grid',
                selector: '[data-lazy]',
                attr: 'data-lazy'
            });
        }

        $(document).ready(function(){

        $('.be__slider').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            lazyLoad: 'ondemand',
            prevArrow: '<div class="slick-prev"><i style="color:#206182;font-size: 28px;" class="fa fa-chevron-left"></i></div>',
            nextArrow: '<div class="slick-next"><i style="color:#206182;font-size: 28px;" class="fa fa-chevron-right"></i></div>',
            responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    arrows: false
                }
            }, {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    arrows: false,
                }
            }]
        });

        });;

    }

});

似乎找不到任何遇到类似问题的人的资源。我的 QueryLoader 也卡在了 94%，我的猜测是它与此有关。任何见解？谢谢。

4

1 回答 1

0

好的，不知道这是如何解决的。但基本上我意识到，自从上次更新 queryloader2 CDN 以来，已经有了一些新版本。所以我在我的服务器上托管了最新版本并改为调用它，问题得到了解决。

于 2016-09-14T20:26:36.927 回答