【发布时间】：2021-12-21 05:50:26
【问题描述】：
我有一个 iOS 手机特有的问题，至少在我看来是这样。
我支持一个网站 falla.co.uk。一切都很好，除了从 iOS 手机（我不知道 iPad）运行时，主页上的搜索图像按钮没有显示（它们显示大约 20 次刷新中的 1 次）。 iPhone 上的浏览器没有区别（我试过 safari、chrome 和 firefox）。它们在安卓手机上工作，在电脑上通过浏览器（包括 MacBook）工作。
图像最初是隐藏的，JS 将显示那些应该显示的图像。它们都应该显示在主页上。
对于导致图像无法显示的 iPhone，我需要说明什么具体问题。
html的相关部分如下：
<div class="row search-service-type-btns" style="display: flex;">
<script>
var initial_service_type = ""
var is_brand = false
</script>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioCareHome" name="service_type" value="service_care_home" checked="">
<label for="radioCareHome"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/care-homes-selector-box.07a043b18e60.png" alt="Care Homes"></label>
</div>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioHomeCare" name="service_type" value="service_home_care">
<label for="radioHomeCare"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/home-care-selector-box.79290d9e4862.png" alt="Home Care"></label>
</div>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioLiveInCare" name="service_type" value="service_live_in_care">
<label for="radioLiveInCare"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/live-in-care-selector-box.ee30e9164992.png" alt="LiveIn Care"></label>
</div>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioRetirementVillage" name="service_type" value="service_retirement_village">
<label for="radioRetirementVillage"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/retirement-living-selector-box.abf50719d5ee.png" alt="Retirement Living"></label>
</div>
</div>
<div class="search-tabs" id="search-tabs" style="background-color: rgb(38, 79, 84);">
<div class="tab-content search-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row align-items-center search-box-panel-div">
<div class="search-box-left-panel d-flex align-items-center form-group autocomplete-container">
<div class="input-group input-label-absolute-right input-label-absolute">
<input class="form-control border-0 shadow-0 search-input" type="text" name="search" maxlength="128" title="Search" placeholder="Enter Location or Postcode" required="" id="id_location_search" value="" itemprop="query-input">
</div>
<div class="list-group list-group--home collapse text-left" id="location-search-autocomplete-results"></div>
</div>
<div class="search-box-right-panel">
<button type="submit" class="btn btn-primary btn-block h-100 btn-search">Search</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row align-items-center search-box-panel-div">
<div class="search-box-joint-panel d-flex align-items-center form-group autocomplete-container">
<div class="input-group input-label-absolute-right input-label-absolute">
<input class="form-control border-0 shadow-0 search-input" type="text" name="organisation_search" maxlength="128" title="Search" placeholder="Enter Service or Provider name" id="id_search">
</div>
<div class="list-group list-group--home collapse text-left" id="search-autocomplete-results"></div>
</div>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist" style="display: flex;">
<li class="nav-item search-by">
<a class="nav-link active search-by" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="background-color: rgb(38, 79, 84); border-color: rgb(38, 79, 84);">Search by Location</a>
</li>
<li class="nav-item search-by">
<a class="nav-link search-by" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Search by Service or Provider name</a>
</li>
</ul>
</div>
<div id="other_service" class="search-content" style="display: none;">
<div class="row">
<div class="search-box-left-panel d-flex align-items-left form-group autocomplete-container">
<div style="text-align: left">
<p class="input-group input-label-absolute-right input-label-absolute">
<strong>
Not sure what you need?
</strong>
</p>
<p>
We know it's an emotional, confusing and costly decision to make. We can help you make an informed decision and the best choices.
</p>
</div>
</div>
<div class="search-box-right-panel">
<a href="/free-advice-lines/care-advice" class="btn btn-primary btn-block btn-search">Find out</a>
</div>
</div>
</div>
<div id="not_sure_div" class="not-sure-div pt4" style="display: block;">
<input type="radio" id="radioOther" name="service_type" class="not-sure" value="service_other" style="display:none">
<label class="not-sure" for="radioOther"><img class="digital-care2" src="https://cdn.autumna.co.uk/prod/static/img/not-sure-icon.c8f114c682bb.png" style="display:initial"> Not Sure what care you need?</label>
<!--<a href="/search/safe" style="color:white">Safe Badge</a>-->
</div>
广告js
'use strict';
var searchBoxColor = '#264F54'
var inactiveColor = '#cccccc'
function change_care_type (obj) {
if (obj == "service_home_care") {
searchBoxColor = '#1FA18F'
$('#search-tabs').show()
$('#other_service').hide()
}
else if (obj == "service_live_in_care") {
searchBoxColor = '#FFC700'
$('#search-tabs').show()
$('#other_service').hide()
}
else if (obj == "service_retirement_village") {
searchBoxColor = '#ABB5B5'
$('#search-tabs').show()
$('#other_service').hide()
}
else if (obj == "service_other") {
searchBoxColor = '#ABB5B5'
$('#other_service').show()
$('#search-tabs').hide()
}
else {
searchBoxColor = '#264F54'
$('#search-tabs').show()
$('#other_service').hide()
}
$('#search-tabs').css('background-color', searchBoxColor)
$('.nav-link.active.search-by').css('background-color',searchBoxColor)
$('.nav-link.active.search-by').css('border-color',searchBoxColor)
}
$('.nav-link.search-by').click(function (){
if (! $(this).hasClass('active')) {
$('.nav-link.search-by').css('background-color', searchBoxColor)
$('.nav-link.search-by').css('border-color', searchBoxColor)
$('#search-tabs').css('background-color', searchBoxColor)
$('.nav-link.active.search-by').css('background-color',inactiveColor)
$('.nav-link.active.search-by').css('border-color',inactiveColor)
}
})
$("input[name='service_type']").change(function(){
change_care_type($(this).val());
});
$(document).ready(function () {
change_care_type(initial_service_type);
if (window.location.pathname == '/' ){
// Not home page
$('.search-service-type-btns').css('display','flex')
$('.not-sure-div').css('display','block')
}
if (!is_brand) {
$('#myTab').css('display','flex')
} else {
//$('.search-service-type-btns').css('display','flex')
$('#search-tabs').css('background-color', inactiveColor)
}
})
// Get the header
var header = document.getElementById("filter-container");
// Get the offset position of the navbar
var sticky = 660;
// When the user scrolls the page, execute myFunction
$(function(){
$(window).scroll(function() {
try {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
catch (err){
}
});
});
【问题讨论】：
-
谢谢大卫，但我不明白为什么这会让图像加载大约 20 次中的 1 次
标签： javascript ios