如何使我网站的作品集部分中的项目下拉菜单加载得更快?

发布于 2025-01-11 04:07:31 字数 2474 浏览 0 评论 0原文

我的 网站 加载得很好,但是当我尝试打开我的作品集部分中的任何项目时,可能需要一秒钟加载时间太长 - 桌面和桌面移动的。

这是我认为可能导致此问题的代码片段 - 我不确定需要进行哪些更改来修复它,请帮忙。

谢谢

`jQuery('.portfolio-item a').on("click", function(e) {
            e.preventDefault();
            var $that = jQuery(this);
            var $item = $that.closest(".portfolio-item");
            
            if ($item.find('.loading').length===0) {
                jQuery('<div />').addClass('loading').appendTo($item);
                $that.parent().addClass('active');

                var $loading = $item.find('.loading'),
                    $container = jQuery('#portfolio-details'),
                    timer = 1;
                
                if ($container.is(':visible')) {
                    closeProject();
                    timer = 800;
                    $loading.animate({width:'70%'}, {duration:2000, queue:false});
                }

                setTimeout(function() {

                    $loading.stop(true, false).animate({width:'70%'},   
{duration:5000, queue:false});
                    
                    //Add AJAX query to the url
                    var url = $that.attr("href")+"?ajax=1";
                    
                    jQuery.get(url).done(function(response) {
                        $container.html(response);
                        
                        $container.waitForImages(function() {
                            $loading.stop(true, false).animate({width:'100%'}, 
{duration:500, queue:true});
                            
                            $loading.animate({opacity:0}, {duration:100, 
queue:true, complete:function() {
                                $that.parent().removeClass('active');
                                jQuery(this).remove();

                                $container.show().css({opacity:0}); 
                                
                                that.imageSlider($container, function() {
                                    jQuery(document).scrollTo($container, 600, 
{offset:{top:-parseInt(jQuery(".navbar").height(), 10), left:0}});
                                    $container.animate({opacity:1}, {duration:600, 
queue:false});
                                    $container.attr('data-current', 
$that.data("rel"));
                                });
                            }});
                        });`

My website loads just fine, but when I attempt opening any of the projects in my portfolio section, it takes maybe a second too long to load - desktop & mobile.

Here's a snippet of code that I think may be causing this - I'm not sure what changes to make to fix it, please help.

Thank you

`jQuery('.portfolio-item a').on("click", function(e) {
            e.preventDefault();
            var $that = jQuery(this);
            var $item = $that.closest(".portfolio-item");
            
            if ($item.find('.loading').length===0) {
                jQuery('<div />').addClass('loading').appendTo($item);
                $that.parent().addClass('active');

                var $loading = $item.find('.loading'),
                    $container = jQuery('#portfolio-details'),
                    timer = 1;
                
                if ($container.is(':visible')) {
                    closeProject();
                    timer = 800;
                    $loading.animate({width:'70%'}, {duration:2000, queue:false});
                }

                setTimeout(function() {

                    $loading.stop(true, false).animate({width:'70%'},   
{duration:5000, queue:false});
                    
                    //Add AJAX query to the url
                    var url = $that.attr("href")+"?ajax=1";
                    
                    jQuery.get(url).done(function(response) {
                        $container.html(response);
                        
                        $container.waitForImages(function() {
                            $loading.stop(true, false).animate({width:'100%'}, 
{duration:500, queue:true});
                            
                            $loading.animate({opacity:0}, {duration:100, 
queue:true, complete:function() {
                                $that.parent().removeClass('active');
                                jQuery(this).remove();

                                $container.show().css({opacity:0}); 
                                
                                that.imageSlider($container, function() {
                                    jQuery(document).scrollTo($container, 600, 
{offset:{top:-parseInt(jQuery(".navbar").height(), 10), left:0}});
                                    $container.animate({opacity:1}, {duration:600, 
queue:false});
                                    $container.attr('data-current', 
$that.data("rel"));
                                });
                            }});
                        });`

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文