首页猿问加载/替换 data-src...

加载/替换 data-src 中指定的图像或视频

Html5

白衣染霜花 2023-09-11 16:24:44

我的目标是显示 div 中显示的不同图像或视频，当其他元素悬停在上面时，该图像或视频会发生变化。我想我可以通过检查 a 中指定的图像文件data-src并将其加载到img页面上的标签中来仅处理图像。但是，我需要将标记更改为img指定video电影文件时的标记 - 这就是我需要的帮助。您可以在此处查看“工作”图像版本（第三个项目中没有占位符视频，因此data-src不会显示）： https://codepen.io/moy/pen/BaNxzdL所以当前页面上我有这个空图像标签：<div class="carousel__bg"> <img src="" /></div>图像文件在多个轮播项目上指定，如下data-src例所示：<div class="carousel__item" data-src="img/content/1-wide.jpg"> <div class="carousel__content"> <h4 class="carousel__title">Behind The Scenes</h4> <span class="carousel__flag">// Featured</span> <h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2> <a href="#" class="carousel__btn">Read the Article</a> </div> <img src="img/content/1.jpg" class="carousel__image" /></div>获取图像 URL 并将其添加到页面的 javascript 是这样的：$(function() { var overlay = $('.carousel__bg img'), cached = {}; $('.carousel__item').mouseenter(function() { var item = $(this), spot = $(this).index('.carousel__item'), value = item.attr('data-src'); overlay.fadeTo(0,0).attr('src', value); if (!overlay[0].complete && !cached[spot]) { cached[spot] = true; $('.carousel__bg').addClass('loading'); overlay.one('load', function() { $('.carousel__bg').removeClass('loading'); overlay.fadeTo(300,1); }); } else overlay.fadeTo(300,1); }) .mouseleave(function() { overlay.finish(); });});显然，问题是如果我指定data-src="video/safari.mp4"它就不起作用，因为它当前正在尝试将视频添加到元素中img。那么我该如何在 img/video 标签之间切换呢？一个相关的问题是能够加载文件的 mp4 + webm/ogg 版本吗？那么是否需要重新设计以根据扩展名将imgorvideo元素“注入”到页面上？我尝试使用 if/else 语句来检查是否data-src包含.mp4扩展名，并且只是将video页面上的元素硬编码为文本，但无法使其工作。:/这些文件可能非常大，这就是为什么我在需要它们之前才加载它们。编辑顺便说一句，我决定将这些物品放入轮播中，看看这种效果是否有效 - 效果非常好！但是，我注意到当您将鼠标悬停在上一个/下一个按钮上时，我在 CSS 中淡出图像的方式（悬停时淡出所有图像.carousel，然后定位单个项目并覆盖）现在是一个问题不要淡入。有人有更好的方法来处理这个问题吗？我尝试了 100% CSS 方法，但也许添加一个类会更好？光滑的轮播示例：https ://codepen.io/moy/pen/JjdvRyG

查看完整描述

1 回答

红糖糍粑

TA贡献1815条经验获得超6个赞

元素video部分并不难，重要的部分是获取视频的 mime 类型以添加到元素中source。它data-src采用视频 url 数组（不同类型），并在找到类型后将不同的源添加到元素中。

我更新了你的代码笔

至于按钮，它们位于.carousel元素内部，因此悬停将冒泡到基于该按钮设计样式的所有元素。我使一些元素更加具体，因此它们只会在项目列表悬停时改变样式。

最后，为了让监听器适用于 slick 元素，我将它们更改为.on.

var VIDEO_TYPES = {

'mp4': 'video/mp4',

'webm': 'video/webm',

'ogv': 'video/ogg',

}

/**

* Slick

$(document).ready(function() {

$('.slick-carousel').slick({

//centerMode: true,

centerPadding: '0',

slidesToShow: 3,

arrows: true,

dots: false,

prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',

nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',

responsive: [{

breakpoint: 960,

settings: {

centerMode: true,

slidesToShow: 1

}

{

breakpoint: 600,

settings: {

centerMode: true,

slidesToShow: 1

}

{

breakpoint: 480,

settings: {

centerMode: true,

slidesToShow: 1

}

]

})

.on('setPosition', function(event, slick) {

slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');

});

/**

* Image Swap

var cached = {};

var overlay_video = $(".carousel__bg video");

var overlay_img = $(".carousel__bg img");

var overlay = $(".carousel__bg");

$(".carousel__item")

.on('mouseenter', function() {

var item = $(this),

spot = $(this).index(".carousel__item"),

value = item.data("src");

overlay_video.empty();

var overlay_item;

overlay.fadeTo(0, 0);

//videos will have an array ur urls

var is_video = value instanceof Array;

if(is_video) {

overlay_item = overlay_video;

overlay_img.attr("src", '');

overlay_video.append(value.map((url) => {

var extension = url.split('.').pop();

var type = VIDEO_TYPES[extension];

return `<source src="${url}" type="${type}">`

}));

} else {

overlay_item = overlay_img;

overlay_img.attr("src", value);

}

//force the video element to reload

overlay_video.get(0).load();

if (!overlay_item.complete && !cached[spot]) {

cached[spot] = true;

overlay.addClass("loading");

overlay_item.one(is_video ? "loadeddata" : "load", function() {

overlay.removeClass("loading");

overlay.fadeTo(300, 1);

});

} else overlay.fadeTo(300, 1);

})

.on('mouseleave', function() {

overlay.finish();

});

/**

* Base styling.

html {

background: rgb(255,255,255);

font-size: 62.5%;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-overflow-scrolling: touch;

-webkit-text-size-adjust: 100%;

}

body {

background-color: transparent;

color: rgb(0,0,0);

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

font-family: 'Roboto', sans-serif;

font-size: 1.6rem;

font-weight: 400;

line-height: 1.6rem;

margin: 0;

padding: 30px 0 0;

text-rendering: optimizeLegibility;

}

/**

* Carousel

.carousel {

background: rgb(0,0,0);

color: rgb(255,255,255);

height: 640px;

margin: 0 auto;

overflow: hidden;

position: relative;

width: 100%;

max-width: 1200px;

}

.carousel:before,

.carousel:after {

background: rgba(255,255,255,.25);

content: "";

height: 100%;

position: absolute;

top: 0;

left: 33.33333%;

width: 1px;

z-index: 30;

}

.carousel:after {

left: 66.66666%;

}

/**

* Background (fullwidth) image

.carousel__bg {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

height: 100%;

width: 100%;

}

.carousel__bg.loading {

background: url(../img/interface/loading.gif) no-repeat center center;

}

.carousel__bg img, .carousel__bg video {

display: block;

height: 640px;

object-fit: cover;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

}

/**

* Individual carousel item

.carousel__item {

box-sizing: border-box;

float: left;

height: 640px;

position: relative;

width: 33.33333%;

}

.carousel__item:hover {

cursor: pointer;

}

/* Text Content */

.carousel__content {

background: rgba(0,0,0,.45);

box-sizing: border-box;

color: rgb(255,255,255);

height: 100%;

min-height: 100%;

padding: 30px;

position: absolute;

top: 0;

left: 0;

width: 100%;

z-index: 15;

}

.carousel__title,

.carousel__subtitle,

.carousel__flag {

color: rgb(255,255,255);

letter-spacing: 1px;

font-family: 'Anton', sans-serif;

font-weight: 400;

line-height: 1;

margin: 0 0 5px;

padding: 0;

text-transform: uppercase;

}

.carousel__title {

font-size: 20px;

transition: all .25s;

}

.carousel__subtitle {

display: none;

font-size: 48px;

}

.carousel__flag {

color: rgb(45,190,193);

font-size: 14px;

}

/* Button */

.carousel__btn {

background: transparent;

border: 1px solid rgb(255,255,255);

box-sizing: border-box;

color: rgb(255,255,255);

display: block;

font-family: 'Anton', sans-serif;

font-size: 12px;

font-weight: 400;

height: 45px;

line-height: 45px;

letter-spacing: 1px;

opacity: 0;

position: absolute;

padding: 0 30px;

bottom: 30px;

left: 30px;

right: 30px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

transition: all .15s;

-webkit-backface-visibility: hidden;

}

.carousel__btn:visited {

background: transparent;

}

.carousel__btn:focus,

.carousel__btn:hover {

background: rgb(45,190,193);

border-color: rgb(45,190,193);

}

/* Image */

.carousel__image {

display: block;

height: 100%;

opacity: 1;

object-fit: cover;

transition: all .30s;

position: relative;

width: 100%;

max-width: 100%;

-webkit-backface-visibility: hidden;

}

/* When hovering over the carousel, fade all the titles out */

.carousel>.slick-carousel>.slick-list:hover .carousel__title {

opacity: .30;

}

/* But not the one contained without the 'item' you're hovering over */

.carousel:hover .carousel__item:hover .carousel__title {

opacity: 1;

}

/* Fade all images out so the fullwidth background image is visble */

.carousel>.slick-carousel>.slick-list:hover .carousel__image {

opacity: 0;

}

/* Hide the flag element */

.carousel>.slick-carousel>.slick-list:hover .carousel__flag {

display: none;

}

/* Show the subtitle */

.carousel:hover .carousel__item:hover .carousel__subtitle {

display: block;

}

/* Display the CTA of the active item */

.carousel:hover .carousel__item:hover .carousel__btn {

opacity: 1;

}

/* Slick Prev/Next */

.slick-carousel,

.slick-list,

.slick-track {

height: 100%;

min-height: 100%;

}

.slick-arrow {

background: transparent;

border: 1px solid rgb(255,255,255);

color: rgb(255,255,255);

display: block;

font-family: 'Anton', sans-serif;

font-size: 24px;

height: 45px;

line-height: 45px;

margin-top: -30px;

overflow: hidden;

position: absolute;

top: 50%;

left: 30px;

text-align: center;

transform: rotate(45deg);

transition: all .15s;

width: 45px;

z-index: 60;

}

.slick-arrow:hover {

background: rgb(255,255,255);

color: rgb(0,0,0);

}

.slick-arrow span {

display: block;

transform: rotate(-45deg);

}

.slick-arrow--next {

left: auto;

right: 30px;

}

/* Slick Core */

.slick-slider

{

position: relative;

display: block;

box-sizing: border-box;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-touch-callout: none;

-khtml-user-select: none;

-ms-touch-action: pan-y;

touch-action: pan-y;

-webkit-tap-highlight-color: transparent;

}

.slick-list

{

position: relative;

display: block;

overflow: hidden;

margin: 0;

padding: 0;

}

.slick-list:focus

{

outline: none;

}

.slick-list.dragging

{

cursor: pointer;

cursor: hand;

}

.slick-slider .slick-track,

.slick-slider .slick-list

{

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.slick-track

{

position: relative;

top: 0;

left: 0;

display: block;

margin-left: auto;

margin-right: auto;

}

.slick-track:before,

.slick-track:after

{

display: table;

content: '';

}

.slick-track:after

{

clear: both;

}

.slick-loading .slick-track

{

visibility: hidden;

}

.slick-slide

{

display: none;

float: left;

height: 100%;

min-height: 1px;

}

[dir='rtl'] .slick-slide

{

float: right;

}

.slick-slide img

{

display: block;

}

.slick-slide.slick-loading img

{

display: none;

}

.slick-slide.dragging img

{

pointer-events: none;

}

.slick-initialized .slick-slide

{

display: block;

}

.slick-loading .slick-slide

{

visibility: hidden;

}

.slick-vertical .slick-slide

{

display: block;

height: auto;

border: 1px solid transparent;

}

.slick-arrow.slick-hidden {

display: none;

}

</div>

<h4 class="carousel__title">Behind The Scenes</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">Read the Article</a>

</div>

</div>

<h4 class="carousel__title">Reed Stark</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">Watch the Video</a>

</div>

</div>

<h4 class="carousel__title">Fresh Drops</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">See The Collection</a>

</div>

</div>

<h4 class="carousel__title">Fresh Drops</h4>

<span class="carousel__flag">// Featured</span>

<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>

<a href="#" class="carousel__btn">See The Collection</a>

</div>

</div>

反对回复 2023-09-11

1 回答
0 关注
129 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

加载/替换 data-src 中指定的图像或视频

加载/替换 data-src 中指定的图像或视频

1 回答

添加回答