Question

我已经浏览了我的项目，当页面加载时，它会收取所有上传图片和类别：

如您所见，它适合图像，具体取决于所选类别。问题是页面会变慢，因为它会加载所有图像......如何优化这些过程？我想有些像删除所有类别，但我不知道如何以查询开始，例如办公室类别过滤器

有我的代码：

function GalleryCatPopulate(url, listname, target) {

var eng = false;
if ((window.location.href.indexOf("lang=en") > 0)) {
    eng = true;
}


 // Getting our list items
 $.ajax({
    url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?   $select=Title,English",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        completeGalleryCat(data, target, eng);
    },
    error: function (data) {
        failureGalleryCat(data, target);
    }
});
}

function completeGalleryCat(data, target, eng) {
var items = data.d.results;
var prefix = "";
var sufix = "<div class='clear'></div>";
if (eng)
   prefix = "<div class='filter selected' data-category='cat-all'>All</div>";
else
    prefix = "<div class='filter selected' data-category='cat-all'>Todas</div>";
var menu = "";
var cat = "";
var title = "Transporte de Materiales";
console.log(title.replace(/\s/g, "_").replace(/[^\w\s]/gi, ''));
for (var item in items) {
    if (eng)
        cat = items[item].English; 
    else
        cat = items[item].Title;

                menu += "<div class='filter' data-category='" + cat.replace(/\s/g, "_").replace(/[^\w\s]/gi, '') +"'>"+ cat +"</div>";

        }
$(target).html(prefix + menu + sufix);

}

function failureGalleryCat(data, target) {
$(target).text("There is something bad wit load images, please check console");
}

function GalleryContentPopulate(url, listname, target) {

var eng = false;
var queryGallery = "$select=Title,Description,Enlace,EncodedAbsUrl,Categoria/Title&$expand=Categoria/Title";

if ((window.location.href.indexOf("lang=en") > 0)) {
    queryGallery = "$select=TitleEnglish,DescriptionEnglish,Enlace,EncodedAbsUrl,Categoria/English&$expand=Categoria/English";
    eng = true;
}


// Getting our list items
$.ajax({
    url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?$top=1000&" + queryGallery,
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        completeGalleryContent(data, target, eng);
    },
    error: function (data) {
        failureGalleryContent(data, target);
    }
});
}

function completeGalleryContent(data, target, eng) {
var items = data.d.results;
console.log(items);
var menu = "";
var cat = "";
for (var item in items) {
if(items[item].DescriptionEnglish==null)
    items[item].DescriptionEnglish="";
if(items[item].Description==null)
    items[item].Description="";
    if(items[item].Categoria.results!= null &&    items[item].Categoria.results!= undefined && items[item].Categoria.results.length > 0){
        cat =setCategories(eng,items[item].Categoria.results);
    }
    if (eng){

        menu += "<div class='mega-entry " + cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].TitleEnglish + "</div><p>" + items[item].DescriptionEnglish + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='" + items[item].TitleEnglish + "'><div class='mega-view mega-red'></div></a></div>   </div>";
      }else{
        menu += "<div class='mega-entry "+ cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].Title + "</div><p>" + items[item].Description + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='"+ items[item].Title +"'><div class='mega-view mega-red'></div></a></div></div>";
    }
}
$(target).html(menu);
  var api = $(target).megafoliopro(
                {
                    filterChangeAnimation: "pagebottom",            // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
                    filterChangeSpeed: 400,                 // Speed of Transition
                    filterChangeRotate: 99,                 // If you ue scalerotate or rotate you can set the rotation (99 = random !!)
                    filterChangeScale: 0.6,                 // Scale Animation Endparameter
                    delay: 20,
                    defaultWidth: 980,
                    paddingHorizontal: 10,
                    paddingVertical: 10,
                    layoutarray: [9, 11, 5, 3, 7, 12, 4, 6, 13]     //    Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.
                });

        //console.log("entra");
        // FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
        jQuery(".fancybox").fancybox();
        //console.log("sale");

        // THE FILTER FUNCTION
        $('.filter').click(function () {
            $('.filter').each(function () {    jQuery(this).removeClass("selected") });
            api.megafilter(jQuery(this).data('category'));
            $(this).addClass("selected");
        });
var categorySelected = getParameterByName("Category");
$("div[data-category='"+categorySelected +"']").click();

}

function failureGalleryContent(data, target) {
console.log(data);
$(target).text("Error loading parallax. Please check console for more info");
 }


function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function setCategories(boolLang, objResult){
var cat ="";
for(var item in objResult){
 if(boolLang)
    cat += replaceAll(" ", "_",objResult[item].English.replace(/[^\w\s]/gi, '')) + ' ';
 else
    cat += replaceAll(" ", "_",objResult[item].Title.replace(/[^\w\s]/gi, '')) + ' ';
}
return cat;
}

function replaceAll( find, replace,string) {
return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
 }
  function escapeRegExp(string) {
  return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
 }

提前谢谢！

选择优化列表

0 个答案: