Это интересно. Я использую Behance API чтобы вызвать некоторые данные из моего профиля, чтобы сделать небольшую карусель портфолио. Я начал ловить эти ошибки после того, как добавил QueryLoader2 на мою веб-страницу:
Я пытался добавить <?php header('Access-Control-Allow-Origin: *'); ?>
в начало моей страницы, но без изменений.
Затем я попытался добавить Header set Access-Control-Allow-Origin *
на мой файл .htaccess до сих пор безрезультатно.
Еще немного кода, который может быть полезен:
Queryloader 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 Bootstrap Portfolio Script:
$(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%, и я предполагаю, что это как-то связано с этим. Любое понимание? Благодарю.
Хорошо, понятия не имею, как это исправить. Но в основном я понял, что с момента последнего обновления CDN queryloader2 появилось несколько новых версий. Поэтому я разместил на своем сервере последнюю версию и назвал ее, и проблема была исправлена.
Других решений пока нет …