模态打开后仅加载图像 [英] Only load images after modal is open
问题描述
我有一个大格子的盒子.每个框都会打开一个模态.每个模态内部都有图像.
I have a large grid of boxes. Each box opens a modal. Each modal has images inside it.
问题是页面加载了所有图像，并且需要花费很多时间.仅在打开特定模态时，如何才能加载该模态的图像?也许还带有spinner gif?
Problem is that the page loads ALL images and it takes forever. How can I get it to load a modal's images only when that particular modal is opened? Perhaps with a spinner gif as well?
我正在使用 custombox.js 插件.
I'm using custombox.js plugin.
$(document).ready(function() {
$('.info').on('click', function(e) {
Custombox.open({
target: $(this).data('href'),
effect: 'push',
speed: 500,
overlayColor: '#2C3E50',
overlayClose: false,
//overlayEffect: '',
//overlayOpacity: 1,
});
e.preventDefault();
});
});
模式代码示例
<div id="modal57" class="modal">
<div id="portfolioItemClose" class="close"><span></span>
</div>
<div class="portfolioTitle wow fadeInLeft" data-wow-delay=".5s" data-wow-duration=".3s">ikuw solutions
</div>
<div class="portfolioImageBodyContainer">
<div class="portfolioImage wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
<div id="gallery" class="">
<div class="content">
<img data-src="../../../../../assets/images/portfolio/brochures-flyers/20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_1.jpg" class="image_1">
<img data-src="../../../../../assets/images/portfolio/brochures-flyers/20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_2.jpg" class="image_2" style="display:none;">
</div>
</div>
</div>
<div class="portfolioBody wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s">
<div class="portfolioClientDescriptionUsage">
<div class="portfolioBodyClient wow fadeIn" data-wow-delay=".8s">ikuw solutions</div>
<div class="portfolioBodyDescription wow fadeIn" data-wow-delay=".9s">PL/SQL tips & techniques flyer</div>
<div class="portfolioBodyUsage wow fadeIn" data-wow-delay="1s">students</div>
</div>
<div class="portfolioBodyText wow fadeIn" data-wow-delay="1.1s">[text]</div>
<div class="portfolioBodyPDF wow fadeIn" data-wow-delay="1.1s"><a href="../../../../../assets/images/portfolio/brochures-flyers/20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques.pdf" target="_blank">View full-scale PDF <span class="fa fa-angle-right"></span></a></div>
<div class="portfolioBodyLine wow zoomIn" data-wow-delay="1.2s" data-wow-duration=".3s"></div>
<div class="portfolioBodyVersions wow fadeIn" data-wow-delay="1.3s">pages</div>
<div class="thumbnail">
<div class="thumb wow bounceIn" data-wow-delay="1.5s"><a href="#" rel="1"><img data-src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_1.jpg" id="thumb_1" class="fit"></a></div>
<div class="thumb wow bounceIn" data-wow-delay="1.6s"><a href="#" rel="2"><img data-src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20150102_ikuw_flyer-tech_oracle-pl-sql-tips-techniques_2.jpg" id="thumb_2" class="fit"></a></div>
</div>
</div>
</div>
</div>
推荐答案
一种解决方案是在加载时删除所有模式框图像源，并将其值保留在属性data-src中.然后，当您打开模态窗口时，由于相应的data-src值，您可以将源设置为仅打开的模态图像.像这样的东西:
A solution would be to remove all your modal boxes images sources at load and keep their value in an attribute data-src. Then, when you open a modal window, you could set the sources to only the open modal images thanks to the corresponding data-src value. Something like that:
$(document).ready(function () {
// Considering that your modal divs have a class 'modal'
$(".modal img").not(":visible").each(function () {
$(this).data("src", this.src);
this.src = "";
// or remove the whole attribute with $(this).removeAttr("src")
});
// Set an attribute `data-sourcesAreSet` to each modal div in order to prevent setting the images sources if they are already set
$(".modal").each(function () {
$(this).data("sourcesAreSet", false);
});
$('.info').on('click', function (e) {
var correspondingModal = $($(this).data('href'));
// Only set the images sources if they are not already set.
if (correspondingModal.data("sourcesAreSet") == false) {
correspondingModal.find("img").each(function () {
this.src = $(this).data("src");
// or add the attribute with $(this).attr("src", $(this).data("src"))
});
correspondingModal.data("sourcesAreSet", true);
}
Custombox.open({
target: $(this).data('href'),
effect: 'push',
speed: 500,
overlayColor: '#2C3E50',
overlayClose: false
});
e.preventDefault();
});
});
以下是可与上述代码一起使用的模式框示例:
The following is an example of modal box that would work with the above code:
<a data-href="#modal" class="info">Click here</a>
<div id="modal" class="modal-demo modal">
<button type="button" class="close" onclick="Custombox.close();">
<span>×</span><span class="sr-only">Close</span>
</button>
<h4 class="title">Modal title</h4>
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<img src="Images/example.png" />
</div>
</div>
如果您还希望在加载图像时显示微调gif，则可以按照此答案中的建议的方式进行操作对于每张图片，或者，您都可以将div设置为与模态框一样大的div，并在其中包含微调框gif，您可以将其隐藏在custombox的"complete"回调函数中，尽管我不确定是否会在以下情况下触发此函数所有图像均已加载完毕.
If you also want to show a spinner gif while your images are loading, you could do something as suggested in this answer for every image, or alternatively, you could have a div as big as the modal box with an spinner gif inside that you could hide in the custombox's "complete" callback function, though I'm not exactly sure that this function is triggered when all the images have finished loading.
这篇关于模态打开后仅加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
