Блог

Главная - Вопросы по программированию - Блокировка загрузки изображений из сторонних источников путем чтения localStorage

Блокировка загрузки изображений из сторонних источников путем чтения localStorage

#html #image

Вопрос:

Я создаю веб-сайт и хотел бы дать пользователям возможность блокировать загрузку сторонних элементов ( в основном изображений ) на сайт, чтобы снизить скорость загрузки. Я уже использовал ленивую загрузку ненужных изображений, но хотел бы предоставить пользователям возможность вообще никогда не загружать изображения. Что я могу здесь сделать? Я попытался использовать свойство CSS hide, но изображение все еще загружено, но не видно. Есть ли какой-нибудь способ остановить загрузку изображений?

Комментарии:

1. Добавьте CSP (Политику безопасности контента) в конфигурацию вашего веб-сервера и разрешите загружать только те ресурсы, из которых, как вы знаете, они должны загружаться.

2. @Snow — рассмотрите возможность использования атрибута данных для изображений. Установите этот атрибут в URL-адрес для загрузки, если изображение действительно должно быть загружено. Проверьте локальное хранилище, затем используйте js для копирования атрибута данных в атрибут src для изображений, которые должны быть загружены.

3. @ManishJangir Я занимаюсь только фронтальной разработкой

4. @enhzflep Не могли бы вы помочь с примером или веб-сайтом, учебником?

Ответ №1:

Вот пример. Предназначено только для демонстрации способа указания изображения, но не для его фактической загрузки. Вам нужно будет решить, как вы хотите хранить флаг «делать/не загружать» для каждого изображения localStorage .

Возможно, массив истинных/ложных значений…. (the .Метод forEach фактически предоставляет объект, индекс цикла/коллекции и коллекцию, из которой он получен/объект массива, для которого .Был вызван метод forEach — в этом примере вместо использования

 images.forEach( 
                img => {

Я мог бы это сделать

 images.forEach( 
                (img,index,collection) => {
                // use index here as index into array retrieved
                // from localStorage.

Пример

 <!doctype html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
    // TODO: Add code to
    // get data from localStorage
    
    let images = document.querySelectorAll('img');
    
    images.forEach( 
                    img => {
                        let shouldLoad = false;
                        
                        // TODO: Add code to 
                        // check current image against retrieved data
                        // to see if it should be loaded
                        
                        // example-code. 
                        // I'm just relying on the image's
                        // class attribute
                        if (img.classList.contains('dontLoad') == false)
                            shouldLoad = true;
                            
                        if (shouldLoad == true)
                            img.src = img.dataset.url;
                    }
                );
}
</script>
<style>
img{
    border: solid 1px red;
    min-width: 32px;
    min-height: 32px;
}

<!--
    dontLoad is just used to flag images for loading
-->
dontLoad{
}
</style>
</head>
<body>
<img data-url='../gfx07.jpg'/>
<img class='dontLoad' data-url='../heart.png'/>
<img data-url='../carColour.jpg'/>
<img class='dontLoad' data-url='../s13.bmp'/>
</body>
</html>

Ответ №2:

Будет ли что-то подобное работать для вас…

Мне пришлось закомментировать localStorage из-за песочницы, но если вы добавите этот cscript в голову, он должен работать

 var enabled = true;

function checkenabled() {
    if (enabled) {
        //add your code here to load images
    } 
}

function changeenabled() {
    if (enabled) {
        //localStorage.setItem('enabled', 'false');
        enabled = false;
        document.getElementById('button').innerHTML = 'disbaled';
        //localStorage.getItem('enabled');
        checkenabled();
    } else {
        //localStorage.setItem('enabled', 'true');
        enabled = true;
        document.getElementById('button').innerHTML = 'enabled';
        //localStorage.getItem('enabled');
        checkenabled();
    }
}
checkenabled(); 
 <button id='button' onclick='changeenabled();'>enabled</button>
Метки: