有条件地加载具有一定宽度的台式PC（非触摸设备）的JS脚本 [英] Conditionally load JS script for Desktop PC (NOT touch device) with certain width only

问题描述

在我的网站上，我使用JS进行视差滚动。我想有条件地将这个JS加载到宽度> = 1025像素的台式机上。而且我迫切需要帮助来优化和组合它们。

On my website I use a JS for parallax scrolling. I want to conditionally load that JS only on Desktop PCs with >= 1025 px width. And I desperately need help with optimizing and putting it together.

具有Parallax-Effect的部分有几个数据属性：

The sections that have the Parallax-Effect have several data-attributes:

<section id="profile" class="slide" data-speed="2" data-offsetY="185" data-type="background">

这些部分还有通过css设置的背景图片。

The sections also have a background image set up via css.

.slide { 
padding:0;
width:100%; 
position:relative; 
margin:0 auto; 
overflow:hidden;
}
#profile { 
background: url(../assets/backgrounds/02_profile_back.jpg) 50% 185px no-repeat fixed, #0f0f11;
height:1027px;
}

JAVASCRIPT

到目前为止我得到了什么：

JAVASCRIPT

What I got so far:

• 在$（文件）上执行的自定义函数（myFunction）.ready


• 检查window.on（'滚动调整大小加载'）


• 通过enquire.js执行JS @breakpoint 1025 px（匹配）


• 设置替代/默认行为（不匹配）


• 使用enquire.js的监听器。

• Custom Function (myFunction) that's executed on $(document).ready
• Check on window.on('scroll resize load')
• Execute JS @breakpoint of 1025 px via enquire.js (match)
• Set alternative / default behaviour (unmatch)
• Use the listener of enquire.js.

这是迄今为止的代码：
（Parallax脚本是：由Richard Shepherd修改，由Ryan Boudreaux修改）

Here's the code so far: (The Parallax Script is: by Richard Shepherd, modified by Ryan Boudreaux)

function myFunction(){

// Cache the Window object
$window = $(window);

// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {  
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){

    // Store some variables based on where we are
    var $self = $(this),
        offsetCoords = $self.offset(),
        topOffset = offsetCoords.top;



// This is the part I'm having trouble with //
// When the window is scrolled, resized, loaded...
    $(window).on('scroll resize load',function(e){

        // Check if Screen-width is higher or equal to 1025px
        enquire.register('screen and (min-width:1025px)', {

            match : function() {

            // If this section is in view
            if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
            ( (topOffset + $self.height()) > $window.scrollTop() ) ) {
            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $self.data('speed')); 
            // If this element has a Y offset then add it on
            if ($self.data('offsetY')) {
                yPos += $self.data('offsetY');
            }
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';
            // Move the background
            $self.css({ backgroundPosition: coords });
                }; // in view
        },

        unmatch : function() {
            $('#profile').css('background-position', '50% 0px');
        }

    }).listen(); // Check Screen Width

    }); // window load resize scroll

}); // each data-type
} // myFunction

我想要实现但不能弄清楚

我正在寻找一种方法来挤压另一个if循环，如果设备不是触摸设备，它只执行第一个匹配 - 部分。我发现 var isTouch =（（窗口中的'ontouchstart'）|| !!（在window.navigator中的'msmaxtouchpoints'）; 但我无法弄清楚如何实现这个所以一切都很合适。

What I want to implement but cannot figure out

I'm looking for a way to squeeze in another if-loop, that only executes the first "match"-part if the device is NOT a Touch Device. I found var isTouch = (('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator)); but I cannot figure out how to implement this so everything fits together.

1. 有没有办法实现条件如果桌面PC有1025px和更高的宽度？


2. 是否有最佳实践/通用解决方案在移动优先结束时有条件地加载parallax-JS？

我知道我的代码很乱，你现在可以告诉我，我是一个菜鸟。然而，我渴望学习并期待你的回复。非常感谢！

I know my code is a mess, you can probably tell by now that I'm a noob. Nevertheless, I'm eager to learn and am looking forward to your replies. Thanks a bunch!

推荐答案

你可以使用 yepnope 动态加载JavaScript，然后使用window.innerWidth检查屏幕宽度。除非您使用浏览器用户代理字符串，否则我不确定是否专门检查移动设备。

Well you could use yepnope to load your JavaScript dynamically, and then use window.innerWidth to check the screen width. I'm not sure on checking specifically for a mobile device, unless you use browser user agent strings.

这篇关于有条件地加载具有一定宽度的台式PC（非触摸设备）的JS脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！